45

Has anybody done this successfully yet? I currently have node-sass installed in my CRA project and I'm trying to replace it with dart-sass but am experiencing difficulty because the CRA error output is telling me that I need to have node-sass installed. Is there any way to let the underlying CRA config know to use my installed dart-sass package instead of node-sass?

enter image description here

Improve this question

3 Answers 3

Reset to default
68

There is this closed issue on CRA repository, so you probably can easily migrate from node-sass to Dart Sass just running a few commands.

First of all check your yarn.lock or package-lock.json to know if the version of the sass-loader that your react-scripts depends on is 7.2.0 or later.

If so, all that you need is run the following commands:

yarn remove node-sass
yarn add sass

In my case after that I had to remove the node_modules directory and ran the yarn install again due to an issue stating the app.

Notes:

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Works like a charm! In my case, only need to remove node-sass and add sass. I added it as a devDependency, this could negatively affect production behaviour? Thanks!
@sevenlops, the documentation of the CRA says to install it on dependencies: create-react-app.dev/docs/adding-a-sass-stylesheet Thera are also a lot of issues questioning the fact of adding dependencies directly on dependencies, and it seems adding dependencies to devDependencies may lead build to fail in some cases. Check this issue for more info: github.com/facebook/create-react-app/issues/2696
Hi,@MiltonCastro I followed your approach too but ran into an issue after that. SassError: Expected "n". ╷ 645 │ .MuiSlider-markLabel.MuiSlider-markLabelActive:nth-last-child(){ ..} . I tried deleting node_modules and npm install again after that, but it didn't work for me. Can you help?
It seems you've successfully migrated to the Dart Sass, but you have a transpilation error on your code. I've already got this kind of issue migrating once, and it was related to a missing semicolon in one of the class attribute. Please try to comment the whole class .MuiSlider-markLabel.MuiSlider-markLabelActive:nth-last-child starting on line 645, in order check this error is fix. If so, them you can try to narrowing the commented code until you find the exact point of failure.
Note that you may need to upgrade your react-scripts version first (I was on 3.0.x and had to update to 4.0.3). Older versions may not recognize the sass lib. It's pretty easy to upgrade, they have instructions on their releases page. Just install the latest version with --exact and probably also reinstall node_modules.
|
24

If you are using npm > 6.9 you can create an alias like so

npm install node-sass@npm:sass

it will install dart-sass and you will be able to keep your CRA configuration.

Improve this answer

6 Comments

I'm using npm not yarn, so couldn't follow the first solution. This one worked great though.
Darn, guess this broke the npm outdated command for some reason!
@dmikester1: why couldn't you do the above with yarn like so: yarn add node-sass@yarn:sass; It seemed to work for me.
@Jeff I'm not using Yarn though, can I do that even if I'm using NPM?
yes, I think so. I misread your earlier comment. I thought you needed a solution for yarn. This above answer is already for people using npm. I was just offering a minor variation for people using yarn
|
0

I had success with:

npm uninstall node-sass
npm install ci
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.