44

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

Danchez
  • 1,266
  • 2
  • 13
  • 28

3 Answers3

66

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:

Milton Castro
  • 1,557
  • 11
  • 14
  • 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 Nov 11 '20 at 11:07
  • 2
    @sevenlops, the documentation of the CRA says to install it on `dependencies`: https://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: https://github.com/facebook/create-react-app/issues/2696 – Milton Castro Nov 13 '20 at 14:37
  • 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? – program_bumble_bee Nov 19 '20 at 14:08
  • 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. – Milton Castro Nov 21 '20 at 21:50
  • 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`. – rococo Jul 24 '21 at 19:07
  • @MiltonCastro What to do if your **sass-loader** is older than **7.2.0**. Actually, mine is **7.1.0**. Should I first update **react-script** and after that follow your steps? Also how to know that version should be exactly above **7.2.0**? – Predrag Davidovic Sep 02 '22 at 12:55
21

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.

natali-pp
  • 319
  • 1
  • 3
0

I had success with:

npm uninstall node-sass
npm install ci
Kurru
  • 14,180
  • 18
  • 64
  • 84