Problems with installing SASS React

Question

I want to install SASS to my react app. I try yarn add node-sass my console return error:

./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)

Node Sass version 7.0.1 is incompatible with ^4.0.0.

I found advice to uninstall node-sass and install sass. I did it, but then I have got this error:

../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:

• /Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
• /Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
• /Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/(...)/node_modules/webpack/lib/NormalModule.js
• /Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
• /Users/(...)/node_modules/webpack/lib/Compiler.js
• /Users/(...)/node_modules/webpack/lib/webpack.js
• /Users/(...)/node_modules/react-scripts/scripts/start.js

I try to upgrate yarn, add sass-loader, nothing helps

Answer 1

Do this in your package json

"node-sass": "npm:sass@^1.49.9",

React still asks for node-sass after removing it and replacing with sass so you can alias it like this and now react will use sass

Answer 2

Maybe try updating your project's react-scripts, as doing so fixed the issue for me.

I was having the same issue - saw advice elsewhere to switch node-sass out for sass, and then had the same errors mentioned in the OP. Tried Mark O's solution to alias sass, which worked. However, then I tried setting up absolute imports in my project (with jsconfig.json in the way described here), and that was mysteriously failing too.

I then realized that my project had a very old version of react-scripts for some reason, as it was on 2.x.x. So I swapped react-scripts in my package.json to be "react-scripts": "4.0.3", ran npm install, did npm run start and now absolute imports work. I then tried using sass instead of node-sass again and that works too (npm uninstall node-sass, then npm install sass).

Answer 3

try stopping the current development server, and install node-sass again.

Answer 4

I was having similar problem. These steps fixed my problem.

• Delete node_modules rm -rf node_modules
• Delete package-lock.json rm package-lock.json
• Run npm install or yarn install

I am using;

• node-sass: ^6.0.1
• npm: 7.24.2
• node: v16.13.0