Bug: Exactly same scss file can be compiled in "Customize theme" mode but not in preview mode

Shopify Partner
3 0 0


My Problem

I am developing a theme from scratch but my scss file can not be compiled.

The crazy about it, the exactly same scss file can be compiled in "Customize theme" mode but not in the normal / preview mode:


normal / preview mode not working:

customize theme mode is working:

The error message is just "Failed to compile SCSS file" that does not help:


I've read, that shopify is using sass in version 3.2.6, I have compiled the scss file with sass 3.2.6 and it compiles without errors.

My Questions

  • Is there a way to get more error messages?
  • Can the bug be confirmed
  • What can I do to get the scss file work?


Reproduce Issue

My theme is public, you can check it out to reproduce my issue or visit my shop directly (If you have access): https://jumplink-boilerplate.myshopify.com/

Shopify Partner
3 0 0

looks like I have found the problem: In the customize mode, Shopify seems to adds his own sass stuff and the string '@charset "UTF-8";' at the beginning. 
If I do the same, if I add '@charset "UTF-8";' at the beginning of my scss file it works!


For others: this problem also occurs when you've got an error in your file.

Find & fix the error and it will compile.

For this reason - good practice to split code with liquid in (e.g. theme settings) - just makes linting easier.


★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★
Shopify Partner
28 0 9

THANK YOU! I never would have been able to guess what the problem was, as my SCSS was completely valid and compiled successfully using othe tools. Adding @charset "UTF-8"; did it for me.