Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

npm plugin "onchange" does not recognize scss files changes

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.

like image 236
Homam Avatar asked May 16 '16 18:05

Homam


1 Answers

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",
like image 183
qar3ee Avatar answered Nov 15 '22 07:11

qar3ee