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

问题

I am having a problem when using the "--watch" or "-w" flag when running node-sass. I've installed node-sass as a devDependency and specified a script for me to run node-sass. The thing is that when I run the script without any flags everything works fine and the SCSS code is compiled, but when I add the "--watch" flag, it won't even compile the initial code, nor will it detect any file changes. I've done a lot of research and found nothing. I'll leave the scripts down below and I'll be glad to provide any other information that may help with solving this issue.

Inside package.json:

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

This works fine when I run npm run compile:sass and I get this output:

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

But when I change the script to this:

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

I get this output:

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

And it keeps waiting for file changes but when I actually change something nothing happens at all.

回答1:

I had the same problem doing the same natours ;-) course. It's something to do with the version of node-sass.

npm uninstall node-sass --save-dev

Then install version 4.5.3 with;

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

If this doesn't work, check out https://github.com/jonasschmedtmann/advanced-css-course/blob/master/npm-fixes.md

回答2:

I faced the exact same issue(also while doing the natours project:)), and none of the above solutions worked for me. I also tried onchange file watcher and had no luck with that either. In case someone else has the same problem with watching .scss files, I post my solution here. What finally did the trick was a combination of chokidar and node-sass(node-sass-chokidar). I followed this tutorial, which has a step-by-step guide on how to do the setup, and finally, it works! The only things I did differently was that I used the -D flag, in order to save it as devDependency, and also didn't use the -o flag because the ouput destination file already existed.

I used:

npm i node-sass-chokidar -D

then

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

My scripts

"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:*"
  }

You can then run npm run dev or npm run sass:watch.

来源：https://stackoverflow.com/questions/47164678/node-sass-wont-work-when-using-the-watch-flag

标签

css

node.js

Sass

node-sass