Node Sass Watch不能正常使用的暫時代替方案

不知為何自從node-sass升級後,-w的選項就一直沒有生效過--能執行成功,但無法偵測指定Sass/Scss檔案的修改,這樣在無法使用IDE(例如在伺服器作業)的情況下編譯檔案會變得有點麻煩。

目前想到的解決方法是改用Gulp 監視檔案修改,有點麻煩但最少有效。

  1. 安裝gulp和gulp-sass:
npm install gulp gulp-sass
yarn add gulp gulp-sass

2.創建gulpfile.js,輸入以下內容:

vi gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('watch', function () {
  gulp.watch('./css/*.scss', gulp.series('build:scss'));
});

gulp.task('build:scss', function() {
    return gulp.src('./css/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});

3.在Package.json加入Watch指令:

  "scripts": {
    "watch": "./node_modules/.bin/gulp watch"
  }

4.想要編譯Sass/Scss檔案時,運行Watch指令:

npm run watch
yarn watch

完成。逃避可恥但有用,對吧?

發佈留言