CODEWITHSUNDEEP
javascriptreactjspackage.json
Dracep
Dracep

Reputation: 378

Error when trying to run CSS build in package.json

I'm trying to do step 5 in a bulma sass tutorial:

https://bulma.io/documentation/customize/with-node-sass/

enter image description here

I set up my packge.json like this:

  "devDependencies": {
    "bulma": "^0.9.3",
    "node-sass": "^6.0.1",
    "css:build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
    "css:watch": "npm run css:build -- --watch",
    "start": "npm run css:watch"
  }

  "scripts": { //this one is for running the React app
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

To test out my script I run the command

npm run css:build

But receive the following error:

npm ERR! Missing script: "css:build"

How can I better setup my CSS build script?

Upvotes: 0

Views: 1235

Answers (1)

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

You added your scripts to devDependencies instead of scripts. Try this instead:

  "devDependencies": {
    "bulma": "^0.9.3",
    "node-sass": "^6.0.1",
    // React(-scripts) dependencies here
  }

  "scripts": { //this one is for running the React app
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "css:build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
    "css:watch": "npm run css:build -- --watch"
  },

I got rid of the tutorial's start script, since it's just an alias for the css:watch script and clashes with your original start script.

Upvotes: 1

Related Questions