在CSS文件中进行更改后，CSS文件未显示更改

Question

I just converted scss file into css file using npm as per the instructions on this link to instructions and it worked fine for the first time and scss file compiled with a css file autogenerated but now when I make changes to scss file , I don't see css file to change on its own and I have to use npm run watch-css every time and then run the server .Is there any way to do this such that I don't have to run server again and again?

I am adding the package.json file .

{
  "name": "mydecisionapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "css": "^2.2.1",
    "loader": "^2.1.1",
    "node-sass-chokidar": "0.0.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-modal": "^3.1.11",
    "react-scripts": "1.1.0",
    "style": "^0.0.3",
    "validator": "8.0.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0"
  }
}

Answer 1

In the instructions you have posted you will find the answer if you keep following the "Adding a CSS Preprocessor" section.

Install npm-run-all and modify your scripts section as follows

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"

This simply runs the two scripts in parallel, meaning that npm start will now both handle the watching of your scss files, and run the server