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/

#