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;
}
}
}
- @mixins – helps you group CSS declarations. Read more about Mixins here on W3 Schools. These are used with the @include keyword
- Use @for loop, @each and @while. More here on CSS-Tricks.
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 🥗
