Create-react-app: Add support for Dart Sass

[nex3]

It looks like version 2.0.0 added support for Sass, which is rad! However, it also looks like it only supports Node Sass, which uses LibSass. It would be good to support Dart Sass, the new reference implementation that's distributed as pure JS, as well. This means that it doesn't require users to either download a binary blog or natively compile C++ code to use. See the sass-loader documentation for how to configure it to use Dart Sass.

[Timer]

If you uninstall node-sass and install Dart Sass, it should just work.

We support whatever sass-loader supports. Can you try this please?

edit: nevermind it looks like we might need to explicitly specify implementation; can you please try still, tho?

[nex3]

I'm actually the lead dev of Sass, not a React user, so I don't have a setup handy to try this on.

[Timer]

No worries! Thanks for the heads up, then. We'll get to this sometime soon. 😄

Thanks!

[bugzpodder]

Was able to get dart-sass working by adding this to package.json and using yarn resolutions (https://yarnpkg.com/lang/en/docs/selective-version-resolutions/), if anyone wants to test it out.

"resolutions": {
"node-sass": "npm:sass"
}

[xiaoxiangmoe]

see https://github.com/webpack-contrib/sass-loader/pull/626

[aceyoung9]

If you're not using yarn, npm 6.9 added package-aliasing, so npm install node-sass@npm:sass will install dart-sass and play nicely with the default create-react-app config.

Run npx sass --version to verify your sass install.

Further reading:

• npm v6.9 release changelog
• more npm alias examples

[minvedacat]

Adding resolution block to package.json dosn't work, you should try add

"node-sass": "npm:sass",
"sass": "^1.19.0"

to dependencies or yarn add node-sass@npm:sass like the npm command mentioned above

[ztolley]

As yarn workspaces don’t allow the use of resolutions this means I am limited to node sass and that, via node gyp and tar has a security violation, plus as the originator for this ticket says, the dart implementation is now the reference

[bugzpodder]

You can add it to resolution field in yarn workspaces. Once sass-loader releases a new version we will support sass out of the box.

[bianjp]

sass-loader has released a new version v7.2.0 today, so when will create-react-app follows up?

[bugzpodder]

It's not on npm yet https://www.npmjs.com/package/sass-loader