Jak opravit Angular warning: @import tailwindcss: Sass @import rules are deprecated and will be removed

Problém

Ve vašem Angular projektu používajícím SASS a Tailwind CSS narazíte na následující build warning:

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';
        ╵         ~~~~~~~~~~~~~~~~~

▲ [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';
        ╵         ~~~~~~~~~~~~~~~~~

Řešení

Nejprve je důležité vědět, že tento warning můžete typicky jednoduše ignorovat.

Nicméně, zde je návod, jak ho můžete opravit. Najděte následující řádek ve vašem styles.sass nebo kdekoli jste importovali Tailwind CSS:

styles.sass

@import "tailwindcss";

@import "tailwindcss";

A nahraďte ho:

styles.sass

@use "tailwindcss";

@use "tailwindcss";

Musíte umístit @use pravidlo před jakékoliv další styly nebo importy na začátku souboru.