How to convert theme.scss files to theme.css in Shopify themes?

Store Design

Topic summary

Shopify’s move away from theme.scss toward theme.css created confusion for theme owners, especially on older themes like Venture and Brooklyn. The main problem is that theme.scss.liquid often contains Shopify Liquid tags ({{ }} / {% %}) and SCSS mixins, so standard SCSS-to-CSS converters fail with parse errors.

Key developments:

  • Multiple users report online converters do not work because Liquid variables such as {{ settings.color_text }} are not valid plain SCSS.
  • A community workaround did work for several people: open the live store, inspect the compiled stylesheet in the browser, copy that generated CSS, save it as a new theme.css asset, and update stylesheet references in theme.liquid and other layout files from theme.scss.css to theme.css.
  • Some users kept the old SCSS files in place out of caution.
  • One user avoided the issue by switching from Venture to an updated Debut theme.

Current status:

  • No clear official step-by-step solution was shared.
  • The thread remains open/partly unresolved, with uncertainty about automatic theme updates and whether old SCSS files should be removed.
Summarized with AI on March 5. AI used: gpt-5.4.
19

@FG10 i’ve just converted the string ’ {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} ’ into ’ {{ ‘theme.css’ | asset_url | stylesheet_tag }} ’ so it will point on the new file.

Do you think it works anyway? It seems to work…

and please note that this string must be edited in many liquid files, like password.liquid and so on, because many things use to work with the old theme.scss…

I’m just searching for ‘scss’ in any files and editing them

1 Like