Setting up SCSS and Compass workflow for Shopify theme development

Other Questions Shopify
1

I’m trying to build a development setup for Shopify themes using SCSS and Compass but running into issues with Liquid template syntax.

My current setup includes:

  • Main project folder with Compass/SCSS configuration
  • Theme subfolder containing all Shopify theme files
  • Compass config pointing output directories to theme assets folder
  • Compass watch running for automatic compilation
  • Shopify theme gem watching and syncing files to store

The main issue: Compass throws errors when it encounters Shopify Liquid tags in stylesheets. For instance, when I try to use dynamic asset URLs like background-image: url("{{ 'hero-bg.jpg' | asset_url }}"), the compiler fails.

What I need: A way to make SCSS/Compass ignore or pass through Liquid template tags without processing them, so they end up in the final CSS unchanged.

I found a solution using SCSS interpolation and a Compass callback to rename output files:

on_stylesheet_saved do |file_path|
  liquid_file = file_path + ".liquid"
  puts "creating liquid version: " + liquid_file
  FileUtils.copy(file_path, liquid_file)
  puts "cleaning up: " + file_path
end

This creates a seamless workflow where I can edit SCSS locally and see changes instantly on my Shopify store.

2

I’d try webpack with sass-loader instead of ditching Compass completely. Had the same Liquid compilation headaches and this fixed it for me. Webpack processes the SCSS but leaves Liquid tags alone as plain text. You can set sass-loader to ignore certain patterns or write a custom loader that keeps Liquid syntax intact during builds. Way better than post-processing since your sourcemaps stay accurate and you’re not running multiple compilation steps. I pair it with webpack-dev-server for hot reloading, then dump everything straight into the theme assets folder. There’s a learning curve with webpack, but once you’ve got it dialed in, it handles messy Shopify theme structures way better than Compass callbacks ever did.

3

Nice workaround! I do something similar but wrap liquid tags in SCSS comments like /* {{ 'asset.jpg' | asset_url }} */ then run find/replace after Compass compiles to strip the comment syntax. Works well and doesn’t need callbacks or Gulp setup.

4

i just started using liquid vars in my SCSS. i created a _variables.scss.liquid file with all my shopify vars, like $bg-image: {{ 'hero.jpg' | asset_url }};, and then imported it normally. compass compiles it fine since it’s valid scss syntax, and liquid runs after.

5

Been dealing with this exact problem across multiple Shopify projects. Those manual workarounds work, but they get messy fast when you scale up or work with a team.

I automated the entire SCSS to Liquid conversion using Latenode. Set up a workflow that watches my SCSS files, compiles them through Sass API, handles Liquid tag preservation automatically, and pushes the final CSS.liquid files directly to Shopify.

It handles all the edge cases without manual find/replace or duplicate file management. Plus I connected it to Slack so the whole team knows when stylesheets update.

Best part? Zero maintenance once it’s running. No more babysitting Compass callbacks or team members forgetting comment syntax.

Took 30 minutes to build, saved hours every week since.

6

I’ve encountered the same Liquid syntax issue while building Shopify themes. What resolved my problem was replacing Compass callbacks with a custom Gulp setup. My approach involves processing the SCSS first, followed by a post-processing task that reverts comment markers back to Liquid syntax. I use /* {{ 'image.jpg' | asset_url }} */ in my SCSS, and the script effectively removes these markers in the final output. This gives much better control over how the conversion is handled and effectively addresses edge cases. Although it requires a bit more initial effort, it eliminates the need for duplicate files, keeping version control streamlined without cluttering it with both CSS and CSS.liquid files.

7

Had this same headache for weeks until I found a workaround. Skip the Compass callbacks and build tools - just use SCSS variables with string interpolation instead. I throw all my Shopify asset paths into SCSS variables at the top of my main stylesheet: $hero-bg: "{{ 'hero-bg.jpg' | asset_url }}"; and reference them like normal. The key is wrapping the whole Liquid expression in quotes so it’s treated as a string. SCSS compiles fine since it sees valid string variables, and the Liquid syntax passes through clean to your final CSS. No file duplication, no post-processing scripts, and you still get all your SCSS features like mixins and nesting.