Ever wanted to just quickly squish SCSS into your small project? It’s node so there is a bit of faffing and cramming modules everywhere, but here’s a quick, small setup

Initiate a Node project & install Gulp and Gulp CLI.

$ npm init -y
$ npm i –global gulp-cli
$ npm i gulp –save-dev

Install the gulp-sass plugin and the del module

$ npm i –save-dev gulp-sass
$ npm i –save-dev del

Project structure will be:

index.html (link to css/app.css)
gulpfile.js (you create this empty file)
node_modules (node will have added these)
package-lock.json(node will have added these)
package.json(node will have added these)
inc(folder)
SASS(folder)
— app.scss
CSS(folder)
— app.css

//here is what you need to add to the gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const del = require('del');
gulp.task('styles', () => {
    return gulp.src('inc/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('inc/css/'));
});
gulp.task('clean', () => {
    return del([
        'inc/css/app.css',
    ]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
gulp.task('watch', () => {
    gulp.watch('inc/sass/**/*.scss', (done) => {
        gulp.series(['clean', 'styles'])(done);
    });
});


//Finally:

//then run the command “gulp watch” and start writing your SCSS

//Thanks to http://zetcode.com/gulp/sass/ from where I borrowed most of this and rearranged to suit my own structure