Watching SASS files with NPM node-sass

Question

I have node-sass installed and have set the options as in the bottom response on Using node-sass watch option with npm run-script, however, it just doesn't seem to work for me.

This is my package.json file with my latest attempt:

{
  "name": "linkup-paints",
  "description": "NPM for Linkup Paint Supplies website for 2019",
  "version": "1.0.2",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*, !styles/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "build-sass": "node-sass styles/main.scss css/main.css",
    "watch-sass": "node-sass -w styles/main.scss css/main.css"
  },
  "author": "dpDesignz",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "run-script-os": "^1.0.3",
    "node-sass": "^4.9.4"
  }
}

So I've tried:

"build:sass": "node-sass -r --output-style compressed styles/main.scss -o css/main.css",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"

and:

"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"

and:

"scss": "node-sass --watch styles/main.scss -o css/main.css"

and (as suggested by sidthesloth):

"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"

I run npm i, and once that's complete I run npm start. The browser-sync starts, and watches the file changes, but my css/main.css doesn't compile, or update when I change an .scss file.

I've only just started/learnt how to use NPM, so any help would be much appreciated. I've poured over tutorials and answers (including Using node-sass, Watch and Compile Sass in Five Quick Steps, and Using node-sass to compile Sass files in an npm script) for the past 2 hours with no luck.

How can I get my watch and build to work?

Update

So just an update for anyone looking for this in the future, I didn't understand how scripts worked and didn't realise that my scripts weren't being run parallel to each other. I thought npm start trigerred all my scripts to run, I didn't realise that you had to call all of them. My final package.json file is as follows:

{
  "name": "linkup-paints",
  "version": "1.0.3",
  "description": "NPM for Linkup Paint Supplies website for 2019",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "start": "npm-run-all --parallel browser-sync build-sass watch-sass",
    "browser-sync": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "build-sass": "node-sass styles/main.scss css/main.css",
    "watch-sass": "node-sass -w styles/main.scss css/main.css"
  },
  "keywords": [
    "linkup",
    "2019"
  ],
  "repository": {},
  "author": "dpDesignz",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.3",
    "browser-sync": "^2.26.3",
    "node-sass": "^4.9.4"
  },
  "bugs": {
    "url": "http://support.dpdesignz.co"
  },
  "homepage": "http://www.dpdesignz.co"
}

I ended up adding the npm-run-all script and changing my start args to npm-run-all --parallel browser-sync build-sass watch-sass as I don't need cross-os compatability with the old run-script-os args I had previously. I also put the -w (--watch) arg in the browser-sync line to cause the created .css files to trigger a sync as the build actually replaces the .css file, not "changes" it as required by browser-sync by default.

Answer 1

These are the two NPM scripts that I use to either build or watch SCSS files using node-sass:

"build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css"
"watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css"

Hope this works for you