使用 --watch 标志时，Node-sass 将不起作用

Question

在运行 node-sass 时使用“--watch”或“-w”标志时遇到问题。我已经将 node-sass 安装为 devDependency 并为我指定了一个脚本来运行 node-sass。问题是，当我在没有任何标志的情况下运行脚本时，一切正常并且 SCSS 代码已编译，但是当我添加“--watch”标志时，它甚至不会编译初始代码，也不会检测到任何文件变化。我做了很多研究，但一无所获。我会将脚本留在下面，我很乐意提供任何其他可能有助于解决此问题的信息。

package.json内部：

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css"
 }

当我运行 npm run compile:sass 并得到以下输出时，这工作正常：

natours@1.0.0 compile:sass /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours
node-sass sass/main.scss css/style.css

Rendering Complete, saving .css file...
Wrote CSS to /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours/css/style.css

但是当我把脚本改成这样的时候：

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

我得到这个输出：

natours@1.0.0 compile:sass /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours
node-sass sass/main.scss css/style.css -w

它一直在等待文件更改，但是当我真正更改某些内容时，什么都没有发生。

Answer 1

这是我的解决方案：

1. 从 npm npm install gaze -D 安装凝视
2. 创建一个新的 JavaScript 文件并使用凝视观察 sass 文件 使用 exec 方法进行更改并执行您想要的命令 nodejs 自带的 child_process 库。

我在 package.json 文件的 scripts 属性中添加了一个脚本。

"sass:compile": "node-sass [your-input-src] [your-output-dest]"

watch.js 文件：

const gaze = require("gaze");
const { exec } = require("child_process");

// Command to run in terminal
const COMMAND = "npm run sass:compile";

// takes the command and uses 'exec' to execute it in
// a terminal (shell)
function cmd(command) {
  exec(command, (err, stdout, stderr) => {
    if (err) {
      console.log("error: ", err);
      return;
    }
    if (stderr) {
      console.log("stderr: ", stderr);
      return;
    }
    console.log("stdout: ", stdout);
  });
}

gaze("sass/*.scss", (err, watcher) => {
  if (err) {
    console.log(err);
    return;
  }

  // Watched files
  const files = watcher.watched();
  console.log("Watching these files: ", files);
  
  // Gaze emits four events (changed, added, deleted, all)
  // listen to the ones you want
  watcher.on("changed", (filePath) => {
    console.log(filePath, "file changed.");
    cmd(COMMAND);
  });

  watcher.on("added", (filePath) => {
    console.log("File: ", filePath, "was added.");
  });

  watcher.on("deleted", (filePath) => {
    console.log(filePath, "was deleted.");
  });

  watcher.on("all", (event, filePath) => {
    console.log("All: ", filePath, " was ", event);
  });
});

查看凝视库文档以获取更多信息。 https://github.com/shama/gaze

Answer 2

我遇到了完全相同的问题（在进行 natours 项目时也是如此:)），上述解决方案均不适合我。我也尝试了onchange 文件观察器，但也没有运气。如果其他人在观看 .scss 文件时遇到同样的问题，我会在此处发布我的解决方案。 最终成功的是 chokidar 和 node-sass(node-sass-chokidar) 的组合。我关注了this tutorial，它有一个关于如何进行设置的分步指南，最后，它起作用了！唯一不同的是我使用了 -D 标志，以便将其保存为 devDependency，并且也没有使用 -o 标志，因为输出目标文件已经存在。

我用过：

npm i node-sass-chokidar -D

然后

npm i autoprefixer chokidar-cli npm-run-all postcss-cli -D

我的脚本

"scripts": {
    "build-task:scss-compile": "node-sass-chokidar --source-map true sass/main.scss  css/style.css",
    "build-task:autoprefixer": "postcss css/*.css --use autoprefixer -d css",
    "sass:build": "npm-run-all -p build-task:*",
    "sass:watch": "chokidar 'sass/**/*.scss' -c 'npm run sass:build'",
    "dev": "npm-run-all -p sass:*"
  }

然后您可以运行npm run dev 或npm run sass:watch。

Answer 3

我在做同样的事情时遇到了同样的问题 ;-) 课程。和node-sass的版本有关。

npm 卸载 node-sass --save-dev

然后用;安装4.5.3版

npm install node-sass@4.5.3 --save-dev.

如果这不起作用，请查看https://github.com/jonasschmedtmann/advanced-css-course/blob/master/npm-fixes.md