Infinite styles compiling (create-react-app and node-sass)

Created by: ummahusla

So we have a project which uses create-react-app and node-sass.

I have encountered this error many times over the last 2-3 months. I thought it was only happening to me, but now my colleague sometimes encounters this issue as well.

We have a standard setup from Adding a CSS Preprocessor (Sass, Less etc.).

Actual problem occurs when I edit the styles.scss and save them. Then an infinite compiling loop takes place. It's seriously annoying and it uses a lot of memory as well.

Has anyone had encountered that problem and any ideas how to fix it?

`package.json`

{
  "name": "ParentPortal",
  "version": "0.1.10",
  "private": true,
  "eslintConfig": {
    "extends": "react-app",
    "env": {
      "jest": true
    }
  },
  "devDependencies": {
    "@octopusdeploy/octopackjs": "0.0.7",
    "bootstrap-sass": "^3.3.7",
    "enzyme": "^2.7.1",
    "flow-bin": "^0.41.0",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.5.0",
    "npm-run-all": "^4.0.1",
    "react-addons-test-utils": "^15.4.2",
    "react-scripts": "^0.9.5",
    "react-test-renderer": "^15.4.2",
    "zip-dir": "^1.0.2"
  },
  "dependencies": {
    //
  },
  "scripts": {
    "build-css": "node-sass src/ -o src/",
    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow",
    "publish": "node scripts/deploy.js"
  }
}

Infinite styles compiling (create-react-app and node-sass)

package.json

Example

`package.json`