CODEWITHSUNDEEP
node.jssassnpmbuild-toolsnode-sass
Ryan Metin
Ryan Metin

Reputation: 899

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.

Upvotes: 29

Views: 50887

Answers (7)

José Manuel Blasco
José Manuel Blasco

Reputation: 763

I had issues because node-sass is deprecated (plus, depends on node-gyp, python, vs build tools, etc.)

I used this package.json

  "scripts": {
    "css": "sass styles/scss/styles.scss:styles/css/styles.css",
    "css:watch": "sass --watch styles/scss/styles.scss:styles/css/styles.css"
  },
  "devDependencies": {
    "sass": "^1.57.1"
  },

Please remember changing your source and destination folders.

Upvotes: 1

Battle_Bee
Battle_Bee

Reputation: 11

package.json:

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

npm run compile:sass

note if you run this command the styles does'nt get updated into css file immediately, only if it detects changes in the sass file it updates your css file, not on the initial run.

Upvotes: 1

Mile Mijatović
Mile Mijatović

Reputation: 3177

If you want to watch and compile changes automatically when you save that changes in your .scss file , you can use this solution:

"scripts": {
  "watch:sass": "node-sass -w path/to/your/scss --output-style compressed", 
  // example  :  node-sass -w public/styles/scss/bootstrap.scss public/styles/style.css --output-style compressed
}

Upvotes: 0

Ryan Metin
Ryan Metin

Reputation: 899

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.

Upvotes: 1

Jujhar Singh
Jujhar Singh

Reputation: 129

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

node-sass src/ -wo dist

Upvotes: 0

John Hildenbiddle
John Hildenbiddle

Reputation: 3335

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 [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.

Upvotes: 35

Ryan White
Ryan White

Reputation: 2436

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"

Upvotes: 37

Related Questions