Angular 14-Fehler: Verschachteltes CSS erkannt, aber die CSS-Verschachtelung ist falsch konfiguriert

Question

Ich habe verschachteltes CSS in einer der CSS-Dateien meiner Komponente. Wenn ich „ngserve“ ausführe, funktioniert das CSS nicht und ich erhalte diese Fehlermeldung:

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

Dies ist ein neues Projekt, das mit Angular CLI 14 erstellt wurde und bei dem Tailwind gemäß den Anweisungen hier installiert wurde: https://tailwindcss.com/docs/guides/angular

Ich habe versucht, die Datei postcss.config.js zu meinem Projekt hinzuzufügen, wie im Link im Fehler angegeben, aber es scheint nichts zu passieren:

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

Answer 1

对于在 SCSS 中使用 tailwind 时遇到相同问题的任何人，我通过从 styles.scss 文件中删除以下导入解决了该问题：

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

由于 url 是 CSS 特定语法，我的猜测是 tailwind （或者准确地说是 postcss）认为括号内的文件将始终是 CSS 文件。因此，一旦遇到嵌套，就会抛出该错误。

通过使用SCSS在导入CSS时规定的@use语法来解决： https://sass-lang.com/documentation/at-rules/use/