Erreur angulaire 14 : CSS imbriqué détecté, mais l'imbrication CSS est mal configurée

Question

J'ai des CSS imbriqués dans l'un des fichiers CSS de mon composant. Quand je fais "ngserve", le CSS ne fonctionne pas et j'obtiens cette erreur :

(11:5) 检测到嵌套 CSS，但 CSS 嵌套尚未正确配置。请在您的配置中 *before* Tailwind 启用 CSS 嵌套插件。请参阅此处：https://tailwindcss.com/docs/using-with-preprocessors#nesting

Il s'agit d'un nouveau projet créé à l'aide d'Angular CLI 14, avec tailwind installé selon les instructions ici : https://tailwindcss.com/docs/guides/angular

J'ai essayé d'ajouter le fichier postcss.config.js à mon projet comme spécifié dans le lien fourni dans l'erreur, mais rien ne semble se passer :

module.exports = {
      plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
      }
    }

Answer 1

Pour tous ceux qui rencontrent le même problème en utilisant Tailwind avec SCSS, je l'ai résolu en supprimant l'importation suivante du fichier styles.scss :

@import url('./styles/utility.scss');

Puisque url est une syntaxe spécifique à CSS, je suppose que tailwind (ou postcss pour être précis) pense que le fichier entre crochets sera toujours un fichier CSS. Par conséquent, une fois l’imbrication rencontrée, l’erreur est générée.

Résolu en utilisant la syntaxe @use spécifiée par SCSS lors de l'importation de CSS : https://sass-lang.com/documentation/at-rules/use/