不知為何自從node-sass升級後,-w的選項就一直沒有生效過--能執行成功,但無法偵測指定Sass/Scss檔案的修改,這樣在無法使用IDE(例如在伺服器作業)的情況下編譯檔案會變得有點麻煩。
目前想到的解決方法是改用Gulp 監視檔案修改,有點麻煩但最少有效。
- 安裝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
完成。逃避可恥但有用,對吧?