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.
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",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With