Question

使用npm start运行应用程序后，我无法将scss文件编译为css。是否有一种方法可以将sass重新加载到css，如ts被实用程序tsc编译为js：w。所以我必须停止构建然后执行gulp watch或node-sass命令将scss编译为css然后再次构建解决方案使用npm start。我试过以下方法，但都没有用。这是package.json中的代码：

使用gulp watch：

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"gulp\" ", 
//also tried gulp watch and that did not work too.
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"gulp watch\" ",

这是根目录中的gulppfile.js：

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

使用node-sass命令：

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run sass\" ",             
"sass": "node-sass -w app/sass/ -o app/css/",

任何人都可以告诉我错过了什么或者正确的做法是什么？ TIA

Answer 1

此问题的解决方案已在其他主题中解释，请参阅：How to compile scss to css with node-sass

但是，这是我使用run-watch程序nodemon：

的解决方案

npm install node-sass nodemon --save-dev

在package.json中，将这些添加到＆＃34;脚本＆＃34;：

 "build-css": "node-sass --include-path scss src/input.scss src/styles.css",
 "watch-css": "nodemon -e scss -x \"npm run build-css\" "

然后，在你的＆＃34;开始＆＃34;脚本，使用此：

 "start": "concurrently \"node app.js\" \"npm run watch-css\" "

接下来，我们需要安装并发包：

npm install concurrently --save

编译和提供文件，

npm start

因此，＆＃34; npm start＆＃34;命令触发一个构建，启动应用程序并同时调用＆＃34;运行watch-css＆＃34;命令反过来调用＆＃34; build-css＆＃34;通过nodemon实时编译scss到css。当您在文本编辑器中编辑任何scss时，它会编译和刷新。

Answer 2

运行gulp将运行您未在gulpfile中包含的默认任务。你需要添加这个

gulp.task('default', ['sass','watch']);

Answer 3

没有gulp

  "start": "tsc && concurrently \"tsc -w\" \"lite-server\"  \"npm run build-css\"",
  "build-css": "node-sass resources/css/sass/style.scss resources/css/style.css",

如何在npm start上编译scss到css

3 个答案: