Simple way to overcome the multiple SCSS files issue with Shopify

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

Here's a simple (and a little hacky) solution I came 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 (the latter is optional. Themekit already does this).

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))
    .pipe(gulp.dest('css'));
});

// Rename css.
gulp.task('rename', function(){
  return gulp.src("css/theme.css")
  .pipe(rename("theme.scss.liquid"))
  .pipe(gulp.dest("assets"));
});

// 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'));
});

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