Search code examples
cssnode.jssassnode-sass

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.

Solution

  • 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