ERROR: Task not found: "watch:sass" After NPM Start Terminal Command

Question

I'm working on a CSS Grid tutorial but my issue / question doesn't have to do with CSS Grids, but rather with package.json! I've followed the instructors directions perfectly but when I run 'npm start', I am receiving an error message. My question is is my package.json script outdated (as technology seems to change every week) or is it something I've done incorrect while following the tutorial? Also, is there a dedicated source that I can reference that will tell me if code is outdated? Thank you in advance!

Error Message:

ERROR: Task not found: "watch:sass" npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: npm-run-all --parallel devserver watch:sass npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Package.json:

 {
  "name": "Project",
  "version": "1.0.0",
  "description": "Project webpage",
  "main": "index.js",
  "scripts": {
    "watch-css": "node-sass sass/main.scss css/style.css -w",
    "devserver": "live-server",
    "start": "npm-run-all --parallel devserver watch:sass",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build:css": "npm-run-all compile:sass prefix:css compress:css"
  },
  "author": "Jerrell",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.4.3",
    "concat": "^1.0.3",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.0"
  }
}

Answer 1

I decided to post the answer in case anyone else runs into this issue, the instructor is using "live-server" to automatically update the browser window when changes occur in scss. "live-server" must be installed globally.

Answer 2

node-sass is deprecated. use sass instead. here is a link to the official website and documentation. it doesn't take much to set up either.

https://sass-lang.com/

code example:

"watch:sass": "sass --watch sass/main.scss css/style.css",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "sass sass/main.scss css/style.comp.css",