Cover image for Simple way to overcome the multiple SCSS files issue with Shopify

Simple way to overcome the multiple SCSS files issue with Shopify

adamdsherman profile image AdamDSherman Updated on ・1 min read

Shopify uses SCSS already (and compiles it on the server), but only allows you work on one .scss file, meaning you miss out on splitting up your .scss into more manageable seperate files.

Here's a simple (and a little hacky) solution I cam up with: We compile our multiple scss files into a normal theme.css file, but then use Gulp to rename that file to theme.scss.liquid.

We will use Gulp for 2 things - building SCSS and deploying to the server.

I am using the gulp-shopify-upload plugin for transferring files to Shopify's server (more info on that here https://www.npmjs.com/package/gulp-shopify-upload).

My gulpfile.js looks as such:

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const gulpShopify = require('gulp-shopify-upload');
const watch = require('gulp-watch');

// Normal .scss compilation.
gulp.task('sass', function(){
  return gulp.src('assets/scss/theme.scss')
    .pipe(sass().on('error', sass.logError))

// Rename css.
gulp.task('rename', function(){
  return gulp.src("css/theme.css")

// Compile and rename css.
gulp.task('do-sass', gulp.series('sass', 'rename'));

// Watch files, upload to Shopify server.
gulp.task('shopifywatch', function() {
  gulp.watch('assets/scss/**/*.scss', gulp.series('do-sass'));
  return watch('./+(assets|layout|config|sections|snippets|templates|locales)/**')
.pipe(gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID'));
Enter fullscreen mode Exit fullscreen mode

And that's it. Running gulp shopifywatch now compiles SCSS files, and watches normal files and shoots everything up to the server. It might complain about .scss, but it's just a warning.


Editor guide