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

完成。逃避可恥但有用，對吧？

發佈留言

Mastodon