Shopify – Concat SCSS files to one single SCSS file with Gulp

README.md

Best Practice to develop Shopify Theme

• Good for multiple Stores with the same Theme, but different Theme settings: https://www.shopify.com/partners/blog/shopify-theme-styles-and-presets
• Develop SCSS: https://medium.com/@josephbergdoll/writing-sass-for-shopify-22c7568dd8f2
• Gulp Concat: https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/

Shopify Theme Inspector

https://chrome.google.com/webstore/detail/shopify-theme-inspector-f/fndnankcflemoafdeboboehphmiijkgp

To use liquid in scss and have SCSS-Compiling (so you get an error): http://www.codeshopify.com/blog_posts/using-gulp-for-sass-compilation-allows-for-sass-partials-with-liquid-tags

Cheat Sheet

https://cheat.markdunkley.com/

Place scss files in /assets/scss/ and add numbers 01.global.scss.liquid or 04.buttons.scss.liquid to the filename, so you can control the order

Folder Structure

assets/
- scss/
  - 01.file.scss.liquid
  - 02.file.scss.liquid

Install Dependencies

Go in theme folder and run:

yarn install

Run

Concats all scss files from assets/scss/ to stylescss.scss.liquid and put it into assets/

gulp scss

When you try to deploy the theme, you will get a error, that .scss files are not allowed, so you have to convert them into .liquid files. stylescss.scss.liquid and then you can use theme setting variables as well.

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const merge = require('merge-stream');

gulp.task('scss', function() {
  const scssStream = gulp.src('assets/scss/'+ '**/*.scss')
    .pipe(concat('stylescss.scss'));

  const mergedStream = merge(scssStream)
  .pipe(gulp.dest('assets'));

  return mergedStream;
});

package.json

{
  "name": "ProjectName",
  "version": "0.1.0",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^4.0.2",
    "merge-stream": "^2.0.0"
  }
}