I just did this with a highly customized version of Debut. Just go to the rendered frontend. Open the code inspector and then find the theme.scss code on any css class and click the theme.scss. It opens the theme.scss rendered as it would be in css. I click cmd-A to select all and CMD-C to copy it. Then I went to the them and created anew css file called newtheme.css and pasted the code there. Then I went into the theme.liquid and where the theme.scss was being called I changed it to newtheme.css and saved. It works just fine on front end and solves the scss being phased out. I still have the originals in the theme as they are not hurting anything in case something is not right I can quickly switch back.
Topic summary
Shopify’s deprecation warning for SCSS prompts requests to convert .scss.liquid to .css.liquid in the Narrative theme, but Liquid variables inside SCSS break most online converters.
What’s been tried:
- Copy the rendered CSS from the storefront (theme.scss.css on the CDN), paste into a new .css asset, and update theme.liquid to reference it. This works for some, but others report broken layouts, missing images/sections, and loss of theme settings because Liquid-driven variables become hard-coded.
- Strip Liquid variables, compile SCSS to CSS with online tools, then re‑insert variables; or use Gulp-based workflows. A community tool can handle some cases but struggles with complex Liquid (e.g., if statements). Several hired experts, citing costs from ~$40 to ~$250.
- Check theme.liquid: if the theme references styles.css.liquid, it’s already pure CSS (Liquid-enabled) and may not need conversion.
Performance debate:
- Users see little or no frontend page speed gains; render‑blocking reports persist. Consensus is benefits are mainly in the theme editor performance, not load speed.
Current state:
- No official auto-conversion tool provided in the thread; Shopify guidance link shared. Workarounds exist with trade-offs, and the issue remains open without a definitive, risk-free method.