
If you’re upgrading your Angular project to the release candidate of Angular v19 using the CLI, you might run into a flood of Sass deprecation warnings during build or serve.
You’ll probably see messages like:
[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.05%)
color.adjust($color, $lightness: -10%)
These warnings are triggered by deprecated Sass functions like darken()
and stem from updates in the Sass compiler used under the hood by Angular.
What Changed in Angular v19?
After digging around, I discovered that this behavior is due to Angular upgrading the Sass compiler dependency from version 1.77.6
to 1.80.6
. The new version enforces stricter warnings for deprecated syntax.
Luckily, thanks to a recent change introduced by Alan Agius, there’s already a way to suppress these warnings using a new Sass compiler config.
How to Silence Sass Warnings in Angular v19
To get rid of these noisy deprecation warnings (temporarily), you can configure your project’s build options in angular.json
(or project.json
for Nx setups) like this:
"architect": {
"build": {
"options": {
"stylePreprocessorOptions": {
"sass": {
"silenceDeprecations": [
"mixed-decls",
"color-functions",
"global-builtin",
"import"
]
}
}
}
}
}
This will suppress the deprecation warnings introduced in the latest Sass update — giving you some breathing room without changing your styles immediately.
Final Thoughts
While silencing these warnings is a helpful short-term fix, it’s worth planning to refactor your Sass in the near future. Sass has been evolving, and relying on deprecated features like darken()
won’t be sustainable in the long run. If you’re aiming for future-proof styles, start transitioning to the recommended color.scale
or color.adjust
functions.
Let me know if you’d like help converting legacy Sass to modern syntax!