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

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

---

Example

[viankakrisna]

Can you try this workaround and see if it's working? It's not the most performant though.

@gaearon @Timer I think it's better if we nudge people to go to css in js solution like styled-components / styletron / etc. Or update the docs. Been seeing more and more issues about node-sass.

[JasonGoemaat]

node-sass seems to detect the css file changing. I changed the script to only look for scss files and it worked for me:

"watch-css": "npm run build-css && node-sass src/*.scss -o src/ --watch --recursive",

[Timer]

@JasonGoemaat Could you please submit a PR detailing that change?

[gaearon]

@gaearon @Timer I think it's better if we nudge people to go to css in js solution like styled-components / styletron / etc. Or update the docs. Been seeing more and more issues about node-sass.

If people want to use Sass it’s their choice. If Sass tools are broken, this is an issue with the tooling ecosystem people decided to invest in. IMO we shouldn’t have opinions here—our opinion is already expressed in that it isn’t enabled by default.

[gaearon]

That said if there’s an easy fix we should definitely update our doc.

[viankakrisna]

@gaearon yeah, I agree with you. I'm just thinking from Sass to css in js convert and how it made everything easier :). I think @JasonGoemaat solution could be used to update the docs, but we should add note for the undetected changes for new file issue.

edit: the note's already there, looking at the linked issue they clearly working on that :)

[michaelwayman]

I can confirmed this is an issue with node-sass after experiencing the same thing and looked into their source

[Timer]

I believe this has been resolved in the latest version of node-sass. Please comment here if it's not resolved.

[kellyrmilligan]

@Timer I believe there is still an issue. i'm on 4.5.2 and I still see this sometimes. using @JasonGoemaat 's tweak to the CLI fixed it for me.

[Timer]

@kellyrmilligan would you be so kind to send a PR fixing the documentation with @JasonGoemaat's suggestion?

[kellyrmilligan]

@Timer there you go.

[viankakrisna]

is this resolved by #2114 ?

[Timer]

Indeed

[taomas]

i had same problem in vscode, and resolved use by add code --usePolling --polling-interval 500

now my package.json script is

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive --usePolling --polling-interval 500"

it's run successfully in vscode