The Sass Deprecation Warning Problem in Angular v19

Since the framework's revival kicked off with Angular v15 and continues through today, the way most developers style their Angular applications has stayed largely consistent. While Tailwind has carved out a significant following in the broader web ecosystem, a large number of Angular codebases continue to rely on the dependable Sass/SCSS approach, using global stylesheets such as styles.scss alongside component-specific files like [name].component.scss.

A considerable portion of developers also still depend on UI libraries such as Bootstrap, often not even on the newest major release. This methodology might not be the most forward-looking, but it remains a solid and productive way to build polished interfaces, especially when application performance is not the primary bottleneck—think internal tools where users are not exactly racing against the clock. It is especially convenient when you have existing expertise with, say, Bootstrap under your belt.

Angular v19 and Its Sass Compiler Upgrade

When you migrate one of these projects to the Angular v19 release candidate using this command

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

the terminal is likely to flood with deprecation warnings from the Sass compiler during both build and serve operations.

The output from the compiler typically reads:

[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

Across every Angular project I have checked so far, these warnings have appeared consistently. I had been brushing them aside, but with my upcoming Angular Best Practices Workshop scheduled for November 18th, I decided it was time to silence them—at least for the time being.

What Changed in the Sass Compiler

Digging into the matter, it became clear the root cause is the update of the Angular Sass compiler dependency, which jumped from 1.77.6 to 1.80.6.

After digging around and with a valuable hint from my colleague Matthieu Riegler, it turned out that the Angular v19 release candidate already includes a setting within the Sass pre-compiler configuration designed exactly for this scenario.

Turning Off the Warnings via angular.json

About three weeks back, Alan Agius introduced a new option that gives developers the ability to suppress these deprecation notices.

All that's required is adding the block below to your angular.json, or to project.json for those working in an Nx monorepo:

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

With this snippet in place, all the fresh deprecation warnings should disappear 🤫

Just remember, this is a stopgap measure until the underlying issues are properly addressed 😏

For those interested in advancing their Angular knowledge, a set of workshops is available in both English and German:

This article was authored by Alexander Thalhammer. Connect with me on Linkedin, X, or giThub.