That method resulted in a clustef*ck in the frontend.
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.
5 Likes