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

Question

我在运行ning 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

我在做同样的 natours 时遇到了同样的问题 ;-) 课程。跟node-sass.

的版本有关

npm uninstall 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

Answer 2

我遇到了完全相同的问题（也在做 natours 项目时:)），none 上述解决方案对我有用。我还尝试了 onchange 文件观察器，但也没有成功。如果其他人在观看 .scss 文件时遇到同样的问题，我 post 这里是我的解决方案。最终成功的是 chokidar 和 node-sass(node-sass-chokidar). I followed 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

这是我的解决方案：

从 npm 安装 gaze npm install gaze -D
创建一个新的JavaScript文件并使用gaze观看sass文件进行更改并使用 exec 方法执行所需的命令 child_process nodejs自带的库

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

"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

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

Node-sass won't work when using the --watch flag

css

sass

node.js

node-sass