powershell
[WARNING] Deprecation [plugin angular-sass]
node_modules/bootstrap/scss/_functions.scss:11:29:
11 │ @if $prev-num == null or unit($num) == "%" or unit($prev-num)
Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0. Use math.unit instead.
Sass Compiler Warnings
Wer seine Angular App in den letzten Tagen und Wochen lokal mit dem Angular CLI Befehl…
ng serve…gestartet hat und dazu diverse .scss Dateien oder das CSS-Framework Bootstrap integriert hat, ist auf o.g. Meldung gestoßen. Für alle die nicht weiterlesen wollen, hier ein einfacher Lösungsansatz um die warnings zu unterdrücken. Füge folgendes deiner angular.json im Build Block hinzu:
angular.json
"architect": {
"build": {
"options": {
"stylePreprocessorOptions": {
"sass": {
"silenceDeprecations": [
"mixed-decls",
"color-functions",
"global-builtin",
"import"
]
}
},Breaking Changes
Die Meldung des Sass-Compilers bezieht sich auf die Abschaffung der @import-Regel und der globalen Built-in-Funktionen. Warum wird @import abgeschafft? Die @import-Regel in Sass hatte einige Nachteile:
- Sie machte alle Variablen, Mixins und Funktionen global zugänglich, was zu Namenskonflikten führen konnte.
- Mehrfaches Importieren derselben Datei führte zu längeren Kompilierungszeiten und aufgeblähtem CSS.
- Es war schwer nachvollziehbar, woher bestimmte Variablen oder Funktionen stammen.
Um diese Probleme zu lösen, hat Sass das Modulsystem eingeführt, dass die neuen Regeln @use und @forward verwendet. Diese bieten eine bessere Modularität, Namespacing und verhindern doppelte CSS-Ausgaben.
Globale Built-in-Funktionen Funktionen wie mix(), die früher global verfügbar waren, sind jetzt in spezifischen Modulen wie sass:math oder sass:string organisiert. Das bedeutet, dass du sie explizit importieren musst, um sie zu verwenden, was Konflikte mit CSS-Funktionen vermeidet.
Weitere Infos erhältst du in der offiziellen Dokumentation von Sass.
