How to disable the Angular v19’s sass compiler deprecation warnings

During the renaissance of the framework (beginning with Angular v15 and still ongoing – I'd say), not much has changed in the way most of us style our Angular apps. While Tailwind has gained popularity within the web community, many Angular apps still are styled in the traditional but well established way of using Sass/SCSS, with global class-based styles in styles.scss and component-based styles in [name].component.scss.

Additionally, many developers continue to use frontend frameworks like Bootstrap - not always in the latest v5. Although this approach might not be cutting-edge, I think it's still an efficient way to achieve solid results, especially if your app's load performance isn’t a critical concern (e.g., for internal apps where employees have infinite time and patience). It can be particularly practical if you’re already familiar with – let's say Bootstrap.

Angular v19

If you're updating one of these Angular apps to the release candidate of Angular v19 with the following command

ng update @angular/cli@next @angular/core@next

you may encounter a ton of deprecation warnings from the Sass compiler when serving or building your Angular app.

The compiler output might look something like this:

[WARNING] Deprecation [plugin angular-sass]

    [...]_variables.scss:79:29:
      LN │ $dark-color: darken($color, 10%) !default;
         ╵              ^

darken() is deprecated. Suggestions:

color.scale($color, $lightness: -17.0568561873%)
color.adjust($color, $lightness: -10%)

More info: https://sass-lang.com/d/color-functions

The plugin "angular-sass" was triggered by this import

So far, numerous Angular apps I’ve tested have shown these warnings. Although I’ve mostly ignored them until now, I have a new Angular Best Practices Workshop coming up on November 18th, and I wanted to eliminate these warnings – at least temporarily.

Sass Compiler Update in Angular v19

After some research, I found that the issue is due to the Angular Sass compiler dependency being updated from version "1.77.6" to "1.80.6".

Through some investigation and a helpful tip from ma man Matthieu Riegler, I learned that Angular v19 release candidate already ships an option in the Sass (pre-)compiler settings configuration to address this exact problem.

Disabling the warnings in angular.json

Three weeks ago, Alan Agius implemented a feature allowing developers to silence these deprecation warnings.

To do this, add the following configuration to your angular.json (or project.json if you’re using an Nx monorepo):

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "sass": {
          "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
        }
      }
    }
  }
},

This addition should silence all newly introduced deprecation warnings 🤫

However, keep in mind that this is a temporary fix until the underlying causes can be resolved 😏

Workshops

For those who want to dive deeper into Angular, we offer a range of workshops - both English and German: