shopify-slate-local-dev-setup.md

Build a new Shopify theme with Slate, with developer workflow and other tips

Make a new Shopify theme with Shopify's Slate starter theme, 
but add ES6 and SCSS support in local development workflow

Set up SCSS and ES6 support on top of Shopify's Slate minimal starter theme.

## Steps for a brand new theme

Install Shopify's Slate theme starter generator:

```
npm install -g @shopify/slate
```

Set up your new theme with Shopify's Slate starter framework, and set up source
SCSS and JS folders.

```
slate theme YOUR-THEME
cd YOUR-THEME
mkdir src-css
mkdir src-js
touch ./src-css/application.scss
touch ./src-js/application.js
git init
git add . && git commit -m "Begin with Shopify's Slate starter theme"
```

Install JS ES6 support packages.

```
npm install --save-dev babel-preset-env babel-polyfill babel-cli gulp gulp-autoprefixer gulp-plumber gulp-replace gulp-sass gulp-watch webpack
```

To support ES6 and JS compilation,
create `webpack.config.js` file and add the following:

```
const path = require('path');

module.exports = {
  entry: './src-js/index.js',
  output: {
    filename: 'application.js',
    path: path.resolve(__dirname, 'src', 'assets')
  },
  watch: true
};

```

To support SCSS compilation,
Create `gupfile.js` file and add the following:

```
const autoprefixer = require('gulp-autoprefixer');
const gulp = require('gulp');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const watch = require('gulp-watch');
const plumber = require('gulp-plumber');

gulp.task('style', function() {
  return watch('src-css/**/*.scss', { ignoreInitial: false }, function() {
    gulp.src('src-css/application.scss')
      .pipe(plumber())
      .pipe(sass({
        includePaths: require('node-neat').includePaths
      }))
      .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        grid: true
      }))
      .pipe(replace('"{{', '{{'))
      .pipe(replace('}}"', '}}'))
      .pipe(gulp.dest('src/styles'))
  })
});

gulp.task('default', [ 'style' ]);
```

Add the `webpack` builder NPM script entry to `package.json` file:

```
  "scripts": {
    "build": "webpack"
  }
```

Include the `application.js` and `application.css` links in the `HEAD` of 
the `header.liquid` file in Slate's theme files. 

Now, follow Slate's guide from here to set up your `config.yml` appropriately.

To run the development setup locally, run the following in three 
separate terminals:

```
gulp
npm run build
slate watch
```

> PROFIT

## PROTIPS

# Use liquid variables in your SCSS files

To access liquid variables in your un-compiled SCSS files, you need to 
perform a bit of syntatic trickery. Remember, the SCSS is compiled locally,
not on the server. So if you want to use a theme setting variable in your 
SCSS file, your local machine will not access it direclty. It will compile
as a string locally, and then be resolved once it is on Shopify's server.

Suppose your theme exposed an `homepage_accent_color` setting in 
`settings_schema.json`. You can use it in your pre-compiled SCSS
files like this:

```
background-color: #{'{{ settings.homepage_accent_color }}'};
```

A background image looks like this:

```
background-image: url(#{'{{ "cool_landscape.jpg" | asset_url }}'});
```

Or, a background image set in a settings file:

```
background-image: url(#{'{{ settings.home_image_1 | asset_url }}'});
```