Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

How do you solve this error while trying to use Sass in your application?. I was struggling quite for some time with this error when I tried to use Sass.

Get to Know SASS

Using an Scss file to style your React/Angular/Gatsby App can really enhance the CSS. SASS has helped in making CSS more awesome. Syntactically Awesome Style Sheets as its name goes, SASS is a language extension of CSS. Some of its features are:

  • Use Variables to declare the properties of elements
// Declare a variable like this
// $<variable-name>

// Example:

$main-fonts: Arial, sans-serif;

h1 {
 font-family: $main-fonts;
}
  • Nest rules to keep child rules within parent
nav {
 background-color: red;
  ul {
   li {
    color: white;
   }
  }
}

Debug Time

Let’s talk about the error 🍔

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

This error is related to versions and dependencies. Node-Sass is deprecated which means it is no longer maintained. Instead of it, we should use Dart Sass.

Latest version of SASS can be installed using this command if you’re using npm.

npm install sass

The error is also related to sass-loader which loads a Sass/SCSS file and compiles it to CSS. In order to solve this issue, you will have to manually install the latest version of sass-loader like this

npm install sass-loader sass webpack

then mention the version like this to install latest (currently v10.1.0)

npm install sass-loader@10.1.0

Once done, this error will no longer be an issue. Let me know if this solved the issue. I was quite frustrated after having tried every random step until I found this solution.

Cheers 🥗

Published by Jayesh Tiwari

I code and energize, loves sharing my journey.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s