Does anyone know of an easy way, online tool, npm package etc, to convert scss to css but still understand and respect liquid tags please?
Whilst there are lots of online tools they all throw errors due to the liquid tags.
Seems there is a need for a tool that understands and respects the liquid tag but can then easily convert a SCSS theme into CSS ? or am I missing something?
Currently Im having to manually work around the tags, commenting them out and putting in dummy values just so the scss can be parsed into css, and then put the actual liquid tags back in.
An easy way is to just view a page that has the rendered css (on your store), view page source, find the file, and copy and paste the rendered css code to a new file. Then, upload the new file as an asset, and change the link in theme.liquid to point to your new file…note that this will result in a straight css file however. - How to convert SCSS to CSS in Narrative Theme - Shopify Community
It should be able to work with your original liquid files too.
Alas all the settings would become baked in values and thats going to be an awful lot of tedious work putting them all back in again.
Im going to see what I can learn about gulp/grunt . Maybe that will put me in the right direction?
Failing that I’ll probably have to write a script to change scss $ vars to – vars etc, comment out the liquid parts, then scss to css , then uncomment the liquid parts; or something like that.
But it feels like an extremely hacky solution (if I can get it to work that is !)
Also interested in a solution to this. Shopify should be providing a script/package we can run locally to convert .scss.liquid to .css.liquid. They obviously already have a compiler that is doing the conversion and creating the .css files from .scss.liquid.
