30

So, I had used sass before using npm install node-sass for my reactjs project. I'm now working on a new project and wanted to use sass again. With the same syntax npm install node-sass to get it installed, I continued to get

./src/components/Main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/Main.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

Or

to import sass files, you first need to install node-sass. run `npm install node-sass` or `yarn add node-sass` inside your workspace
...
...

I followed the instructions to have sass installed from the links npmjs sass-lang using these syntaxes

brew install sass/sass/sass
npm install -g sass

but I'm still encountering either errors I mentioned earlier.

I tried deleting the node-module folder, package-lock.json and reinstalled node-modules. That still did not fix the error. Also, I followed how others got around fixing Node Sass version 5.0.0||6.0.0|| 7.0.0 incompatibility issue but that did not fix mine.

I'm seeking help now.

3

5 Answers 5

80

Don't use node-sass anymore

node-sass is now deprecated. You can easily fix it by the following.

npm uninstall node-sass
npm install sass

It works fully the same with better stability, You will not need to make any additional changes.

And all Works well !



But if you still prefer to use node-sass

You can use the following table to install the appropriate version node-sass for your installed Node.js version which you can check by the command node --version.

npm install node-sass@(your version)

enter image description here

5
  • 3
    Doing this: npm uninstall node-sass npm install sass Just asks for node-sass again.
    – NickJ
    Commented Dec 17, 2022 at 22:51
  • To import Sass files, you first need to install node-sass. Error after uninstalling
    – Ankit
    Commented Feb 7, 2023 at 13:09
  • @Nickj maybe clear node-sass from your package.json file
    – Abraham
    Commented Feb 7, 2023 at 13:58
  • @Abraham The problem was react scripts no longer includes node-sass so you have to do a multitude of steps to get the processing back. The easiest solution is not to use the latest version of react-scripts sadly.
    – NickJ
    Commented Feb 17, 2023 at 20:08
  • 1
    This should be the Accepted Answer. It definitely solves the issue by switching to the sass package. Thank you!
    – Jim Gomes
    Commented Feb 21, 2023 at 18:41
7

You can follow these two steps:

  1. Uninstall your node-sass: npm uninstall node-sass
  2. Install old version node-sass: npm install --save-dev --unsafe-perm [email protected]

It's okay now

5

update sass-loader, or remove and install again.

2
  • 2
    Thank you..... What ended up working for me is doing ``` npm uninstall node-sass npm install node-sass change the "react-scripts": "4.0.0" into "react-scripts": "4.0.3" in package.json and save npm install npm start ``` I got it from www.codegrepper.com Commented Nov 24, 2022 at 19:20
  • also depends on which VueJS version you use, for 2.6.x you cannot use today's version of sass-loader (12), you must stick to v10 --> sass-loader@^10. credits to @D_Pain on its answer. Commented Jan 20, 2023 at 14:51
3

Try this: In your packege.json file, delete "node-sass": "^4.12.0" and replace it with "sass": "". This did it for me.

1

The answer for me was to update react-scripts to 4.0.3. I couldn't do the latest version of react-scripts because it still requires a bunch of hacks to make packages work that had polyfilled modules automatically loaded before.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.