Angular 14错误：检测到嵌套的CSS，但CSS嵌套配置不正确

Question

我的组件的 css 文件之一中有一些嵌套的 css。当我执行“ngserve”时，CSS 不起作用，并且出现此错误：

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

这是一个使用 Angular CLI 14 创建的新项目，根据此处的说明安装了 tailwind：https://tailwindcss.com/docs/guides/angular

我尝试按照错误提供的链接中的指定将 postcss.config.js 文件添加到我的项目中，但似乎没有发生任何情况：

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/