{"id":27145,"date":"2024-11-15T10:13:17","date_gmt":"2024-11-15T09:13:17","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/how-to-disable-the-angular-v19s-sass-compiler-deprecation-warnings\/"},"modified":"2025-04-06T08:42:17","modified_gmt":"2025-04-06T06:42:17","slug":"how-to-disable-the-angular-v19s-sass-compiler-deprecation-warnings","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/how-to-disable-the-angular-v19s-sass-compiler-deprecation-warnings\/","title":{"rendered":"How to disable the Angular v19’s sass compiler deprecation warnings"},"content":{"rendered":"

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

Additionally, many developers continue to use frontend frameworks like Bootstrap<\/strong><\/a> - 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\u2019t a critical concern (e.g., for internal apps where employees have infinite time and patience). It can be particularly practical if you\u2019re already familiar with \u2013 let's say Bootstrap.<\/p>\n

Angular v19<\/h2>\n

If you're updating one of these Angular<\/em> apps to the release candidate of Angular v19<\/em> with the following command<\/p>\n

ng update @angular\/cli@next @angular\/core@next<\/code><\/pre>\n
you may encounter a ton of deprecation warnings from the Sass compiler when serving or building your Angular<\/em> app.<\/p>\n
The compiler output might look something like this:<\/p>\n
[WARNING] Deprecation [plugin angular-sass]\n\n    [...]_variables.scss:79:29:\n      LN \u2502 $dark-color: darken($color, 10%) !default;\n         \u2575              ^\n\ndarken() is deprecated. Suggestions:\n\ncolor.scale($color, $lightness: -17.0568561873%)\ncolor.adjust($color, $lightness: -10%)\n\nMore info: https:\/\/sass-lang.com\/d\/color-functions\n\nThe plugin "angular-sass" was triggered by this import<\/code><\/pre>\n
So far, numerous Angular<\/em> apps I\u2019ve tested have shown these warnings. Although I\u2019ve mostly ignored them until now, I have a new Angular Best Practices Workshop<\/strong><\/a> coming up on November 18th, and I wanted to eliminate these warnings \u2013 at least temporarily.<\/p>\n
Sass Compiler Update in Angular v19<\/h3>\n
After some research, I found that the issue is due to the Angular<\/em> Sass compiler dependency being updated from version "1.77.6" to "1.80.6".<\/p>\n
Through some investigation and a helpful tip from ma man Matthieu Riegler<\/a>, I learned that Angular v19<\/em> release candidate already ships an option in the Sass (pre-)compiler settings configuration to address this exact problem.<\/p>\n
Disabling the warnings in angular.json<\/h2>\n
Three weeks ago, Alan Agius<\/a> implemented a feature allowing developers to silence these deprecation warnings.<\/p>\n
To do this, add the following configuration to your angular.json<\/code> (or project.json<\/code> if you\u2019re using an Nx monorepo):<\/p>\n
"architect": {\n  "build": {\n    "options": {\n      "stylePreprocessorOptions": {\n        "sass": {\n          "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]\n        }\n      }\n    }\n  }\n},<\/code><\/pre>\n
This addition should silence all newly introduced deprecation warnings \ud83e\udd2b<\/p>\n
However, keep in mind that this is a temporary fix until the underlying causes can be resolved \ud83d\ude0f<\/p>\n
Workshops<\/h2>\n
For those who want to dive deeper into Angular<\/em>, we offer a range of workshops - both English and German:<\/p>\n