DEV Community

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

Posted on • Edited on

3 3

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'));
});
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more