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

Add support for Dart Sass #5282

Closed
nex3 opened this issue Oct 3, 2018 · 11 comments · Fixed by #7496
Closed

Add support for Dart Sass #5282

nex3 opened this issue Oct 3, 2018 · 11 comments · Fixed by #7496
Milestone

Comments

@nex3
Copy link

nex3 commented Oct 3, 2018

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
Copy link
Contributor

Timer commented Oct 3, 2018

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
Copy link
Author

nex3 commented Oct 3, 2018

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
Copy link
Contributor

Timer commented Oct 3, 2018

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

Thanks!

@bugzpodder
Copy link

bugzpodder commented Nov 4, 2018

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
Copy link
Contributor

@aceyoung9
Copy link

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:

@iansu iansu modified the milestones: 2.x, 3.x Mar 10, 2019
@minonl
Copy link

minonl commented Apr 24, 2019

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
Copy link

ztolley commented May 17, 2019

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
Copy link

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
Copy link

bianjp commented Aug 9, 2019

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

@bugzpodder
Copy link

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

@lock lock bot locked and limited conversation to collaborators Aug 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants