Setup a local dev environment to work with Shopify themes without messing your workflow
Tags: shopify, scss, local, liquid
Published: 2020-05-18 15:35:25

###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](https://shopify.github.io/slate/docs/about), 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**](https://github.com/Shopify/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](https://shopify.github.io/themekit/#installation).

**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](http://www.codeshopify.com/blog_posts/using-gulp-for-sass-compilation-allows-for-sass-partials-with-liquid-tags) 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.

```Javascript
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:**

```Javascript
gulp.task('default', function() {
    gulp.watch(['./sass/**/*.scss'], gulp.series(['sass']));
});
```

Also remember to **make liquid tags work inside your external sass:**
```Scss
$color_primary:#{'"{{ settings.color_primary}}"'}
```
**And the output will be**
```Scss
$color_primary: {{ settings.color_primary }}
``` 

**Putting all together:**
- In one terminal I start the gulp task with `gulp`
- In another terminal I use `theme watch` to upload any changes with Themekit to my theme 

... and everything works perfectly :)

Well that's it, hope you find this useful !