Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0

Solution 1:

If you want to use SCSS and Sass in your React app, try to do this:

First remove node-sass:

yarn remove node-sass

If you use npm:

npm uninstall node-sass

Then install sass instead of node-sass:

yarn add -D sass

npm i -D sass

Finally your SCSS and Sass files will be correctly compiled!

Solution 2:

Don't use node-sass anymore

node-sass is deprecated. Instead use sass.

You can uninstall the old and install the new one

npm uninstall node-sass

npm install sass

But if you prefer to use node-sass

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

npm install node-sass@(your version)

Enter image description here

Solution 3:

I figured out this issue using node-sass version 4.14.1 with the following commands.

With npm

npm uninstall node-sass
npm install [email protected]

With yarn

yarn remove node-sass
yarn add [email protected]

Solution 4:

I got the same issue. At the time of installing 'node-sass', my Node.js version is 15.

After downgrading node version node-12 and installed node-12 related 'node-sass' it's worked fine.

node -v

# Output: v15.2.0

nvm use 12.18.3

Now using node v12.18.3 (npm v6.14.6)

node -v

# Output: v12.8.3

npm install [email protected]

To make sure it's working properly, add some abc.sass file. And write styles and import it on the component.