First install patternlab/edition-node-gulp.
Then update package.json and run npm install in the command line.
Then update gulpfile.json.
Last active
October 3, 2019 13:48
-
-
Save KatieMFritz/38dda99e71bb7cef7afa2ff57f63f2f4 to your computer and use it in GitHub Desktop.
Add scss support to PatternLab2 edition-node-gulp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "devDependencies": { | |
| "gulp-sourcemaps": "^2.6.0", | |
| "gulp-sass": "^3.1.0" | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment