npm plugin "onchange" does not recognize scss files changes

Question

I am npm newbee and trying to have a very simple build proccess with pure npm (without grunt, gulp, etc). All my package json scripts works fine execpt the one responsible to watch SCSS files and run compilers on file change.
Here is my Package.json files which should be self explaining:

    {
      "name": "test-site.com",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "scss": "node-sass --indent-type tab --indent-width 1 --output-style expanded -o dist/css src/scss",
        "autoprefixer": "postcss -u autoprefixer -r dist/css/app.css",
        "build:css": "npm run scss && npm run autoprefixer",
        "serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html, !node_modules/**/*.html'",
        "reload": "browser-sync reload",
        "watch:css": "onchange 'src/scss/*.scss' -- npm run build:scss",
        "build:all": "npm run build:css",
        "watch:all": "npm-run-all -p serve watch:css",
        "postinstall": "npm run build:all && npm run watch:all"
      },
      "author": "Homam",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "latest",
        "browser-sync": "latest",
        "node-sass": "latest",
        "npm-run-all": "latest",
        "onchange": "latest",
        "postcss-cli": "latest"
      }
    }

The problematic script is "watch:css".
When i change my "index.html" it changes the web page accordingly but there is no change effect when I change any of my SCSS files.

score 21 · Answer 1 · answered Oct 07 '16 at 20:14

21

Are you on Windows? If so, try to replace the single quotes with escaped double quotes as said in the onchange README.

"watch:css": "onchange \"src/scss/*.scss\" -- npm run build:scss",

answered Oct 07 '16 at 20:14

qar3ee

211
2
2

1

This helped explain why my watcher was 'hanging' on Windows, thanks! – Phil Gibbins Aug 21 '17 at 20:34
This fixed it for me too – edwinbradford Nov 27 '20 at 11:26

score 8 · Accepted Answer · answered Jun 17 '16 at 11:09

8

Might be because

"watch:css": "onchange 'src/scss/*.scss' -- npm run build:scss",

Is referencing build:scss which is not defined? You've defined "scss" and "build:css". Try with:

"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",

answered Jun 17 '16 at 11:09

Moris

2,903
16
15

npm plugin "onchange" does not recognize scss files changes

2 Answers2