Have you painfully looking for a more comfortable way to code themes within the Shopify platform and not destroy your workflow? Look no further :)
Well at least for me it was a struggle to find a solution, I want to work locally with my IDE of choice (Studio Code) and being able to organize my Sass styles the way I want with modules, imports, etc.
I'm not an expert on shopify's platform whatsoever so at first I look at Slate's project, it does what I would need but sadly Shopify has officially ended support ... technically I could still using it, but because I'm starting out and still don't know many things about it, I thought It would be nice if I could get control over my dev setup and don't rely on something that seems "deprecated".
Slate project is based on ThemeKit witch is the way Shopify encourage devs to work with themes from now on... So after install it on my terminal and get API credentials of the theme I need to work on, I was up and running in no time. You can check how to set it up here.
ThemeKit gives you a way to download a theme to your local machine and then "watch" for changes you do and automatically update your online theme. So far so good...
The only problem is you still have to deal with Shopify's sass version limitations, they use an older version of sass that does not support @imports... So you end up with two options:
- A single gigantic stylesheet
- Many smaller stylesheets manually added to the
<head>of your theme
None of which good for many reasons...
So I was looking for alternatives to that dilema and found a great post by @upatfive.ca where they describe how to create a Gulp file to preprocess all the sass externally, outside Shopify's theme structure, and then just export the final rendered stylesheet into your theme's assets folder.
With this approach you could write and organize your sass files as you used to and automatically export the result to your theme folder.
var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('./sass/custom.scss')
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(rename('custom.scss.liquid'))
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
.pipe(gulp.dest('./assets/'));
});
gulp.task('default', function() {
gulp.watch(['./sass/**/*.scss'], gulp.series(['sass']));
});
Basically the script create several tasks:
- Takes your Sass file (with all your @imports from your modules) to compile it
- Process it with Autoprefixer
- Replaces interpolation characters needed to make liquid variables work within your Sass files without errors (check example bellow) again to liquid compatible ones
- Rename the file from *.scss to *.scss.liquid
- Export it to the destination directory inside your theme's assets
- ...and last but not least, it watch for changes within your external Sass files.
Important: If you use the original code of @upatfive.ca you may find it won't work, that's because it fails with newer versions of gulp unless you modify the task like I do:
gulp.task('default', function() {
gulp.watch(['./sass/**/*.scss'], gulp.series(['sass']));
});
Also remember to make liquid tags work inside your external sass:
$color_primary:#{'"{{ settings.color_primary}}"'}
And the output will be
$color_primary: {{ settings.color_primary }}
Putting all together:
- In one terminal I start the gulp task with
gulp - In another terminal I use
theme watchto upload any changes with Themekit to my theme
... and everything works perfectly :)
Well that's it, hope you find this useful !
Oldest comments (0)