CODEWITHSUNDEEP
reactjssass
Madzix
Madzix

Reputation: 1

Problems with installing SASS React

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:

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

Upvotes: 0

Views: 3302

Answers (4)

user
user

Reputation: 21

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).

Upvotes: 2

Mark O
Mark O

Reputation: 1167

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

Upvotes: 7

Bahar Yılmaz
Bahar Yılmaz

Reputation: 97

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

Upvotes: 0

justin
justin

Reputation: 345

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

Upvotes: 0

Related Questions