我的組件的 css 文件之一中有一些嵌套的 css。當我執(zhí)行“ngserve”時,CSS 不起作用,并且出現(xiàn)此錯誤:
(11:5) 檢測到嵌套 CSS,但 CSS 嵌套尚未正確配置。請在您的配置中 *before* Tailwind 啟用 CSS 嵌套插件。請參閱此處:https://tailwindcss.com/docs/using-with-preprocessors#nesting
這是一個使用 Angular CLI 14 創(chuàng)建的新項目,根據(jù)此處的說明安裝了 tailwind:https://tailwindcss.com/docs/guides/angular
我嘗試按照錯誤提供的鏈接中的指定將 postcss.config.js 文件添加到我的項目中,但似乎沒有發(fā)生任何情況:
module.exports = { plugins: { 'postcss-import': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, } }
對于在 SCSS 中使用 tailwind 時遇到相同問題的任何人,我通過從 styles.scss
文件中刪除以下導入解決了該問題:
@import url('./styles/utility.scss');
由于 url
是 CSS 特定語法,我的猜測是 tailwind (或者準確地說是 postcss)認為括號內(nèi)的文件將始終是 CSS 文件。因此,一旦遇到嵌套,就會拋出該錯誤。
通過使用SCSS在導入CSS時規(guī)定的@use語法來解決: https://sass-lang.com/documentation/at-rules/use/