Wie man die Angular-Warnung behebt: @import tailwindcss: Sass @import rules are deprecated and will be removed

Problem

In Ihrem Angular-Projekt, das SASS und Tailwind CSS verwendet, tritt die folgende Build-Warnung auf:

sass_deprecation_warning.txt
▲ [WARNING] Deprecation [plugin angular-sass]

    src/styles.sass:2:8:
      2 │ @import "tailwindcss";
        ╵         ^


  Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

  More info and automated migrator: https://sass-lang.com/d/import

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

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.sass';
        ╵         ~~~~~~~~~~~~~~~~~

Lösung

Zuerst ist es wichtig zu wissen, dass Sie diese Warnung typischerweise einfach ignorieren können.

Nichtsdestotrotz, hier ist, wie Sie sie beheben können. Finden Sie die folgende Zeile in Ihrer styles.sass oder wo immer Sie Tailwind CSS importiert haben:

styles.sass
@import "tailwindcss";

Und ersetzen Sie sie durch:

styles.sass
@use "tailwindcss";

Sie müssen die @use-Regel vor allen anderen Stilen oder Importen am Anfang der Datei platzieren.


Check out similar posts by category: Angular, CSS, Tailwind