Compiling SCSS into CSS rather than scss.liquid

[jpjmortimer]

This setup is amazing. Is there a way to get it to compile scss into css rather than getting shopify to compile the scss?

[hayes0724]

Several ways, the default config for packer already does this. It creates two output style files:

1. layout.theme.css.liquid (uses theme.scss)
2. layout.theme.styleLiquid.scss.liquid (uses theme.scss.liquid)

The first is compiled css, the second is uncompiled scss for any styles that require liquid.

If you want to make any changes to how packer works, it's easy to extend or override. Use dev.config.js and prod.config.js to change default settings, here is the production config as an example.

Production Webpack Config

Packer runs Webpack Merge to combine configs. You can also modify paths and all other settings inside packer.config.js

[jpjmortimer]

Thanks for such a swift reply! I've notice that the layout.theme.css.liquid is created on 'build' but not on 'watch'. I'll try and figure out how to add that to the watch command.

[hayes0724]

Watch - this uses dev settings + server so the file is stored in memory and should not be visible in dist folder.

Webpack middleware setting: writeToDisk

Packer file where this is set: app.js

Build - this uses production config and all files are written to disk (previous files in dist are removed)

[jpjmortimer]

OK! Strangely in watch mode the head doesn't pull in layout.theme.css

But after a deploy it does the head will display:

and

So any styles I write to theme.scss doesn't get previewed?