Using node-sass watch option with npm run-script
Solution 1
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"
Solution 2
Building on the previous answers, another option is to leverage NPM's custom script arguments to remain DRY by not repeating the build
script arguments in the watch
script:
"scripts": {
"build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
}
In the above example, the watch:sass
script works as follows:
- Run the
build:sass
script. This will compile your CSS. - Run the
build:sass
script again, but this time include the-w
flag. This will compile your CSS when one of your SASS file changes.
Notice the --
option used at the end of the watch:sass
script. This is used to pass custom arguments when executing a script. From the docs:
As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script.
Solution 3
Btw, here's my change:
"scss": "node-sass src/style.scss dist/style.css",
"start": "parallelshell \"npm run scss && npm run scss -- -w\"
Edit: Change was asynchronous script runs, for the initial compile and then with the watch flag.
Related videos on Youtube
Comments
-
Ryan Metin almost 2 years
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.
-
Evgeny Bobkin almost 7 yearsPlease consider my answer( how-can-i-get-node-sass-watch-and-live-reload-to-work-from-a-single-npm-script) on this one!
-
ALI ATTALAOUI about 4 yearsif you use vcode , I prefer to use extention watching sass live-server it's very useful way
-
-
Ryan Metin over 8 yearsIs there not a way to escape the double quotes it passes though? Like I said, this works:
node-sass src/style.scss dist/style.css -w
This doesn't:node-sass src/style.scss dist/style.css "-w"
Thanks for the tips though. I'll use them for now. -
Ryan White over 8 yearsYou can escape the double quote using backslash. Like: \"-w\", this way the double quotes don't make the JSON invalid, but they show up when you are running the command in the terminal
-
Ryan Metin over 8 yearsI got that. I meant so that
npm run scss -- -w
doesn't passnode-sass src/style.css dist/style.scss "-w"
. -
Ryan Metin over 8 yearsWait... nevermind. I'm an idiot. Don't know why I thought changes weren't doing anything before. Thanks for the help.
-
Rocco over 8 yearsI had to change the second line to this for the watcher to work (parallelshell 2.0):
"start": "parallelshell \"npm run scss\" \"npm run scss -- -w\""
-
Ryan Metin over 8 yearsHuh, I've got 2.0 as well. What if you run the tasks in sync, like:
npm run scss & npm run scss -- -w
. Works either way on my end.. -
Rocco over 8 yearsnot for me - watcher did not actually remain in "watch" mode, so I stuck to parallelshell docs. Also meanwhile I created a "prewatch" task:
"prewatch": "npm run scss"
-
mikemaccana almost 6 yearsCould you edit and explain the answer? 'Here's my change' is pretty vague. What's parallelshell?
-
Nicholas Petersen over 5 yearsDude, that's golden, thank you. FYI, for other node-sass options: npmjs.com/package/node-sass#command-line-interface
-
Chukwuemeka Ihedoro almost 5 yearswarning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts. the script should be updated as
"watch:sass": "npm run build:sass && npm run build:sass -w"