'node-sass' usage is deprecated and will be removed in a future major version

Question

When I upgraded from Angular 8 to 11 I faced this warning

'node-sass' usage is deprecated and will be removed in a future major version. To opt-out of the deprecated behavior and start using 'sass' uninstall 'node-sass'.

can anyone help me
Thanks in advance

Enosis

What's the question here? But since the package is deprecated and will be removed in the future, I suggest listening to the advice on the package's website, ie switching to Dart Sass (npmjs.com/package/node-sass). – Fugacity

You might find what you are looking for here: #53321191 – Wolk

This answer helped me: https://mcmap.net/q/246841/-switching-from-node-sass-to-dart-sass-in-my-angular-cli-project – Womanizer

Answer 1

The full error message is

'node-sass' usage is deprecated and will be removed in a future major version. To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.

So, I think the only solution that you can try is obvious, just uninstall node-sass.

=> I already uninstalled it and tried ng serve and ng build --prod all is working fine.

FYI, I as a developer always have found this library node-sass as a pain in the head because of its incompatibility errors. I am happy that we don't have to use it and deal with its painful errors anymore.

Sphere

Are you using sass in your project? Because uninstalling node-sass and not doing anything else is not enough. – Womanizer

Yes sir I am using scss files inside my apps and it is working fine. – Sphere

Interesting, thank you for the information. It wasn't enough for me. – Womanizer

This change creates an issue with relative urls in the scss files. See : github.com/angular/angular-cli/issues/… – Kaiserism

Hi, did you found any solution to this issue? I'm facing the the same problem in my project . @Womanizer – Poach

You will need to install sass which is the dart version of sass. – Welcy

Answer 2

Try replacing 'node-sass' with 'sass'

npm uninstall node-sass
npm i -S sass

Chattel

This is the real solution. – Welcy

This is the actual answer :) Keep it up @Chattel Thank you – Winterize

Answer 3

$ npm uninstall node-sass

This will fix the following error also.

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

Dhoti

Answer 4

You can replace node-sass with sass, which is the dart version of sass.

npm

npm uninstall node-sass
npm install sass

Yarn

yarn remove node-sass
yarn add sass

If you're using gulp, make sure to update your build script with the correct usage: https://www.npmjs.com/package/gulp-sass

Welcy

Answer 5

After uninstalling I was still getting the same error.

I had a look at the source code, turns out the check is quite fragile:

  try {
        sassImplementation = require('node-sass');
        wco.logger.warn(`'node-sass' usage is deprecated and will be removed in a future major version. ` +
            `To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.`);
    }

Which means that, if you have node-sass installed globally, or in a parent directory somewhere, you'll get this warning.

To test this, make a new file in your project directory and run it with node:

const t = require('node-sass');

console.log(t);

If you don't get module_not_found, it means it's node_sass is being resolved. In my case I had node-sass installed under my user home directory.

Conah

After uninstalling node-sass (in an Angular project and globally) the error hasnt gone away for me either. In the package-lock file i still find references to node-sass as optional peerdependency of sass-loader which in turn is a required package for angular-devkit/build-angular. any idea how I should proceed? – Bizarre

My case is the same, I'm trying to migrate Angular and Angular Material from v11 to v12. My Angular project is under a parent directory which uses node-sass. Due to how Node resolves modules, it tries to look up the parent directory till the root before reporting not finding node-sass and use sass instead. From Angular v13, they will remove node-sass completely: github.com/angular/angular-cli/pull/21455 – Gauntlett

Answer 6

currently (december 2021) it is installed with

npm install -g sass

https://sass-lang.com/install

Coben