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

我在做相同的自然时有同样的问题;-)当然。它与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项目时也是如此），并且上述解决方案都不对我有用。我还尝试了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。

使用--watch标志

2 个答案: