the-couch / slater

🛠 Shopify development toolkit
https://slater.store/
346 stars 47 forks source link

Adding subfolder structure to snippets #115

Open efekurnaz opened 4 years ago

efekurnaz commented 4 years ago

Hey all!

I use a lot of snippets and it's getting harder to organize. I'm trying to add a folder structure to snippets folder but couldn't output the files into snippets/ root. Any ideas how can I do it?

Example: from /snippets/components/foo.liquid to /snippets/foo.liquid

I have installed https://webpack.js.org/plugins/copy-webpack-plugin/

Added this code below to my slate.config.js, no errors, nothing happens. Still builds the folders as it is.


const CopyPlugin = require('copy-webpack-plugin');

...
plugins: [
    new CopyPlugin({
      patterns: [
        { 
          from: 'src/snippets/**/*',
          to: 'build/snippets/' }
      ],
    }),
  ]
...
davidwarrington commented 4 years ago

This is more a restriction of Shopify than Slater. You should be able to sort it with the code you're already using though.

I wrote this whilst playing around with the idea last year, and assuming the plugin hasn't changed too much, I'd imagine it will still work. https://github.com/davidwarrington/filepath-flattener/blob/master/webpack.config.js

Your render tag needs to reference the path in some way. For example, if I had a snippet in snippets/product/card.liquid, I'd include it as {% render 'product.card' %}

As you can see, the delimiter I chose was ., but you might want to choose something else.