Why isn't my CSS file minifying on Shopify?

Technical Q&A
1

I am trying to minifying shopify css files , all most in all blogs/forums they provide one solution by renaming the file xxx.css to xxx.scss.liquid. I followed their steps but still don’t get any result .

below is my snippet ,

First step rename file to. featured-magazine.scss.css;

khairali_1-1618748994612.png
khairali_1-1618748994612.png1449×939 134 KB

2nd step is import

khairali_0-1618748943504.png
khairali_0-1618748943504.png1450×961 133 KB

but still my css file is not minifying

khairali_2-1618749497864.png
khairali_2-1618749497864.png1304×617 100 KB

khairali_3-1618749535019.png
khairali_3-1618749535019.png2128×874 275 KB

what thing i am missing ? or is there any limitation in shopify?

2

Hi @khairali

First you minify the css by online tool and copy the css. create a new file for minifid css and paste the minified css here then rename the file name in theme.liquid file.

Thanks

1 Like
3

Yep, since Shopify depreciated SCSS, this solution does not work anymore.

You can try solution from this thread:

https://community.shopify.com/c/Technical-Q-A/Tool-to-minify-css-liquid/m-p/1122310

also, looks like Shopify will support minification out of the box, as per

https://community.shopify.com/c/Online-Store-Speed/Shopify-offers-Javascript-minification/m-p/1103679

1 Like