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

[japalo]

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.

[holloway]

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]

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

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

[edanzer]

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 [email protected] --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]

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]

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

[polarathene]

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]

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]

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]

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]

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]

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.