如何在 npm start 上将 scss 编译为 css

Question

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

使用 gulp 手表：

"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\" "

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

npm install concurrently --save

要编译和提供您的文件，

npm start

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