node.js - 如何在npm start上将scss编译为css

Question

使用 npm start 运行应用程序后，我无法将 scss 文件编译为 css。有没有办法将 sass 实时重新加载到 css，就像 ts 通过实用程序 tsc:w 编译为 js 一样。所以我必须停止构建，然后执行 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 中，将这些添加到您的“脚本”中:

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

然后，在您的“启动”脚本中，使用以下内容:

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

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

npm install concurrently --save

编译并提供您的文件，

npm start

因此，“npm start”命令会触发构建，启动应用程序并同时调用“run watch-css”命令，该命令又调用“build-css”通过nodemon将scss实时编译为css。当您在文本编辑器中编辑任何 scss 时，它会实时编译和刷新。