Compile SCSS snippet or {% include %} from assets folder

Highlighted
Tourist
5 0 9

I am attempting to extract critical SCSS styles from our theme's stylesheet to insert into the page as inline styles, but I ran into limitations with Shopify that are making it a challenge. I've done some research on this matter but the utility I found (Slate) is no longer in development.

 

To {% include %} the text of the stylesheet directly into the page, it needs to be stored within the snippets folder, but Shopify does not compile SCSS snippets. I would {% include %} it from the assets folder instead, but the include function doesn't work on assets. As a last ditch effort, I would have liked to precompile the SCSS in the critical styles file and just include them from the snippets folder as plain CSS, but since the stylesheet is full of Liquid tags, it won't compile. At this point it appears that my only option is to perform some sort of custom processing on the file to compile the SCSS while preserving the Liquid tags. Even if that works, I would prefer to leave the SCSS intact since it is obviously much easier to work with.

 

I'm fairly new to Shopify development so I'm not sure what the best practice is in this case, but I would presume that there must be some way to accomplish this. If anyone has advice it would be greatly appreciated. Thank you!

0 Likes