Using node-sass watch option with npm run-script

Ryan Metin picture Ryan Metin · Jan 14, 2016 · Viewed 33.6k times · Source

So I'm running tasks in npm package scripts but I want to pass the watch option in npm start.

This works:

"scripts": {
  "scss": "node-sass src/style.scss dist/style.css -w"
}

This doesn't compile, watch, or throw any error:

"scripts": {
  "scss": "node-sass src/style.scss dist/style.css",
  "start": "parallelshell \"npm run scss -- -w\""
}

Doesn't work without parallelshell either or without shorthand.

I assume the problem is the run-script is passing the extra argument in quotes, so the command comes out like:

node-sass src/style.scss dist/style.css "-w"

I'd like this to work without adding any dependencies. What am I missing?

Btw, I'm in Windows 10 with command prompt/git bash.

Answer

Ryan White picture Ryan White · Jan 14, 2016

This is my setup for css building

"scripts": {
  "css": "node-sass src/style.scss -o dist",
  "css:watch": "npm run css && node-sass src/style.scss -wo dist"
},
"devDependencies": {
  "node-sass": "^3.4.2"
}

The -o flag sets the directory to output the css. I have a non-watching version "css" because the watching version "css:watch" ~doesn't build as soon as it's run~, it only runs on change, so I call

npm run css 

before calling

node-sass src/style.scss -wo dist

If you only want it to run on change, and not when first run, just use

"css:watch": "node-sass src/style.scss -wo dist"