Watching for Sass changes in NPM using node-sass, and cross-platform friendly

Viewed 216

This is ultimately a NPM problem, though any Sass-specific tips would be helpful. Ultimately I want to do three things when I start my server:

"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "watch-css": "node-sass scss -wro public/stylesheets",
  "serve": "node ./bin/www",
}

Here are my current options, all of which are unsatisfactory for one reason or another:

Running all 3 scripts from the terminal

~$ npm run build-css && npm run watch-css && npm run serve

I would rather not have to explicitly run the css scripts, rather ensure that the CSS is built and watched every time the server is started.

Put the css scripts in a prestart script

"scripts": {
  "prestart": "node-sass scss -o public/stylesheets && node-sass scss -wro public/stylesheets",
  "start": "node ./bin/www",
}

This is lovely, but it isn't truly cross-platform - PowerShell still doesn't support the && operator. As profoundly annoying as this is, there's no way around it that I know of. I'd be satisfied with the ugly preprestart option, but unfortunately it doesn't work.

Use another watch method

"watch": {
  "build-css": "scss"
},
"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "serve": "node ./bin/www",
}

This works, but it requires pulling in another dependency such as node-watch or nodemon. This also forces rebuilding the entire directory if just one file is changed, which can be a pain on large projects. Plus the watching isn't being done by node-sass, which possibly means losing functionality.

Using npm-run-all

"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "watch-css": "node-sass scss -wro public/stylesheets",
  "serve": "node ./bin/www",
  "start": "npm-run-all *"
}

This, again, works in theory, but it requires pulling in a dependency to do a fairly simple task. npm-run-all in particular pulls 23 dependencies, many of which have fairly deep dependency trees themselves, to do a fairly simple task. On top of that, this didn't work for me because it looked for the node-sass binary in the vendor subdirectory, which isn't where it is. I'm unsure whether there is a simple way around this.

Something tells me there must be an easier way to do what I'm trying to accomplish here, but I've been searching for a while now and haven't found anything. Any help would be appreciated.

0 Answers
Related