Add scss support to PatternLab2 edition-node-gulp

0_Sassy_Pattern_Lab.md

First install patternlab/edition-node-gulp.

Then update package.json and run npm install in the command line.

Then update gulpfile.js, then patternlab-config.json.

If you're renaming your default stylesheet, update it in source/_meta/_00-head.mustache.

Once everything is updated, test with gulp patternlab:build.

For bootstrap-sass:

@import '../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';

gulpfile.js

BEGINNING

//Add Sass support
var sass = require('gulp-sass');
  sourcemaps = require('gulp-sourcemaps');



AFTER PL-COPY:FONT AND BEFORE PL-COPY:CSS

// SASS Compilation
// http://www.brianmuenzenmeyer.com/adding-common-gulp-tasks-to-pattern-lab-node
// https://www.sitepoint.com/simple-gulpy-workflow-sass/
gulp.task('pl-sass', function(){
  return gulp
    .src(path.resolve(paths().source.scss, '**/*.scss'))
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.resolve(paths().source.css)));
});



UPDATE `GULP.TASK('PL-ASSETS')` TO BE THIS

gulp.task('pl-assets', gulp.series(
  'pl-copy:js',
  'pl-copy:img',
  'pl-copy:favicon',
  'pl-copy:font',
  gulp.series('pl-sass', 'pl-copy:css', function(done){done();}),
  'pl-copy:styleguide',
  'pl-copy:styleguide-css'
));



ADD TO BEGINNING OF WATCHERS RIGHT AFTER `const watchers = [`

{
  name: 'Sass',
  paths: [normalizePath(paths().source.scss, '**', '*.scss')],
  config: { awaitWriteFinish: true },
  tasks: gulp.series('pl-sass', reloadCSS)
},

package.json

"devDependencies": {    
  "gulp-sourcemaps": "^2.6.0",
  "gulp-sass": "^3.1.0"
}

patternlab-config.json

/* Update paths > source to add */

  "scss" : "./source/css/scss"

/* or whatever your scss path will be */