Using node-sass watch option with npm run-script

问题:

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.

回答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"

回答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:

1. Run the build:sass script. This will compile your CSS.
2. 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 npm@2.0.0, 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.

回答3:

Btw, here's my change:

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

Now to get that to pipe through my postcss tasks...

回答4:

Simplest in my opinion, for a smaller quick project, is just open a new bash window and paste:

node-sass src/ -wo dist

转载请标明出处:Using node-sass watch option with npm run-script

文章来源: Using node-sass watch option with npm run-script