Comment corriger l'avertissement Angular : @import tailwindcss: Sass @import rules are deprecated and will be removed

Problème

Dans votre projet Angular utilisant SASS et Tailwind CSS, vous rencontrez l’avertissement de build suivant :

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

Solution

Tout d’abord, il est important de savoir que vous pouvez généralement ignorer cet avertissement.

Néanmoins, voici comment le corriger. Trouvez la ligne suivante dans votre styles.sass ou partout où vous avez importé Tailwind CSS :

styles.sass
@import "tailwindcss";

Et remplacez-la par :

styles.sass
@use "tailwindcss";

Vous devez placer la règle @use avant tout autre style ou import en haut du fichier.


Consultez les articles similaires par catégorie : Angular, CSS, Tailwind