facebook/create-react-app

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

ummahusla opened this issue · 14 comments

ummahusla commented

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

create-react-app-issue

viankakrisna commented

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 commented

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

  • 👍12
  • 🎉1
Timer commented

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

gaearon commented

@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 commented

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

viankakrisna commented

@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 commented

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

  • 👍1
Timer commented

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

kellyrmilligan commented

@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 commented

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

kellyrmilligan commented

@Timer there you go.

viankakrisna commented

is this resolved by #2114 ?

Timer commented

Indeed

taomas commented

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

  • 👍1