css file not showing changes after making changes in scss file

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"
  }
}

May be a caching issue. Have you tried this? https://stackoverflow.com/questions/1922910/force-browser-to-clear-cache — Jeremy J Starcher, Feb 01 '18 at 07:54

score 0 · Answer 1 · answered Feb 01 '18 at 09:03

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

css file not showing changes after making changes in scss file

1 Answers1