Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move away from node-sass and update documentation related to it #10045

Closed
japalo opened this issue Nov 9, 2020 · 12 comments · Fixed by #10779
Closed

Move away from node-sass and update documentation related to it #10045

japalo opened this issue Nov 9, 2020 · 12 comments · Fixed by #10779

Comments

@japalo
Copy link

japalo commented Nov 9, 2020

Is your proposal related to a problem?

LibSass and Node-Sass is deprecated :https://sass-lang.com/blog/libsass-is-deprecated
create-react-app-page is recommending to use it: https://create-react-app.dev/docs/adding-a-sass-stylesheet/

Describe the solution you'd like

I think it should be clear that node-sass is deprecated in the wiki/documentation or it should be updated to reflect packages that aren't.

Describe alternatives you've considered

People i work with suggest migrating to Dart Sass, but i want to make sure that it's fully supported by react-scripts before we migrate to anything.

Additional context

I realize there is an old issue describing how to migrate (#5282) but it doesn't say what is actually preferred as a replacement.

@japalo japalo changed the title Move away from node-sass and updating documentation to it Move away from node-sass and update documentation related to it Nov 9, 2020
@holloway
Copy link
Contributor

Dart Sass has additional syntax that node-sass doesn't support, meaning that CRA can't build some Sass projects. I've seen this at work on some projects.

@nhevia
Copy link

nhevia commented Nov 12, 2020

@holloway, wouldn't that be fixed if react-scripts updates sass-loader to 9.0.0, since sass is prefered over node-sass? How come having sass instead of node-sass prevents CRA from compiling to CSS, since the work is done by sass-loader?

@holloway
Copy link
Contributor

@nhevia Yep it may well be fixed by that change in react-scripts

@edanzer
Copy link

edanzer commented Dec 4, 2020

Hi all - not yet a regular contributor to open source projects so apologies if there are conventions I'm missing.

As is, the docs on adding sass to CRA are wrong and produce an error. This will no doubt be fixed in the future, but in the mean time would it make sense to update docs to provide an accurate solution?

For example, using npm install node-sass@4.14.1 --save instead of npm install node-sass --save allows people to use sass right now without issues. I don't know if that's the right solution to the underlying issue, but it just seems like the docs should be updated to be accurate until the issue is resolved. I say this as a relative beginner who just tripped over this issue and had to research it.

If that solution would work, I'd be happy to submit a pull request with updated language in the docs with the line above, along with an explanation as to why.

@matiushenkoa
Copy link

matiushenkoa commented Jan 20, 2021

Check this, dart-sass is the default option in sass-loader. So what you need to do it's just install sass and it will work. Docs regarding it should be updated. Here is a related issue

@japalo
Copy link
Author

japalo commented Apr 12, 2021

@ianschmitz cool! Nicely done and thank you! When can i expect this to rollout? When is the next publish due? :)

@polarathene
Copy link

This is the first result that appeared in google when searching for why the official docs were advising to use node-sass, but fails to run due to version incompatibility (only allows v4 and v5, not current v6).

I see that #10779 updated the docs, but 3 months later this is still not updated at the production docs site? Not sure who to ping about resolving that.

@Drakeoon
Copy link

I see that #10779 updated the docs, but 3 months later this is still not updated at the production docs site? Not sure who to ping about resolving that.

Thanks for this, following the updated guide from #10779 (using sass instead of node-sass) was the way to go. It seems that this part of docs was last updated on 24/03/2019. Also not sure who to ping, but would love to help and get this resolved 😄

@polarathene
Copy link

Probably needs a new issue to get any attention I guess, but also there's this issue about the future of CRA.

I think we'll see the migration to Webpack 5 and PostCSS 8, but after that it might just be in maintenance mode, doesn't appear to be a priority for facebook anymore. When that release happens I suppose the docs in master will get published along with it.

@japalo
Copy link
Author

japalo commented Jul 19, 2021

Well, then technically this issue isn't resolved if you want to be picky about it. Not sure if this should be re-opened or if a new issue should be created because I am kind of waiting for official docs for this as well.

@alamothe
Copy link

alamothe commented Dec 3, 2021

Just wanted to throw this out there. We switched from node-sass to sass but we faced a couple of issues which prompted us to go back:

  • yarn start got around 10x slower. From 20s it went to about 3min, which is unusable.
  • We faced issues with stale CSS. E.g. change SCSS, do yarn build, no change in the built CSS. As a result, our production was using stale CSS for over two weeks.

@rogeruiz
Copy link

rogeruiz commented Apr 9, 2022

Is there a way to use the much faster Dart VM rather than the JavaScript implementation with CRA? or is there a better way to speed things up at build time around Sass files? I'm seeing 500 and 600 + second runs after switching from node-sass to simply sass in my project. My project is definitely a bit complicated as it pull in multiple Sass sheets across two NPM packages where one of them is uses the other as a dependency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants