gulpでsassを導入する

必要なものインストール

npm install gulp-sass --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-sourcemaps --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-rename --save-dev

gulpfile.js編集

// gulpfile.js

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');

const paths = {
  'src': {
    'scss': 'src/scss/**/*.scss',
  },
  'dist': {
    'css': 'dist/css/',
  }
};

gulp.task('sass', done => {
  gulp.src(paths.src.scss)
  .pipe(sourcemaps.init())
  .pipe(sass({
    outputStyle: 'expanded',
  }).on('error', sass.logError))
  .pipe(autoprefixer())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(paths.dist.css))
  .pipe(cleanCSS())
  .pipe(rename({
    suffix: '.min',
  }))
  .pipe(gulp.dest(paths.dist.css));
  done();
});

gulp.task('dev', () => {
  gulp.watch(paths.src.scss, gulp.task('sass'));
});

package.json編集

{
  ... scripts部分に追記してください
  "scripts": {
    "dev": "gulp dev"
  }
}

実行

ファイルが変わるたびに、コンパイルされます。

npm run dev

参考サイト

2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】 - Qiita

2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみま…

qiita.com