Angular 14 エラー: ネストされた CSS が検出されましたが、CSS のネストが正しく構成されていません

Question

コンポーネントの CSS ファイルの 1 つにネストされた CSS があります。 「ngserve」を実行すると CSS が機能せず、次のエラーが表示されます:

(11:5) ネストされた CSS が検出されましたが、CSS のネストが正しく構成されていません。構成内で Tailwind の「前」に CSS ネストされたプラグインを有効にしてください。ここを参照してください: https://tailwindcss.com/docs/using-with-preprocessors#nesting

これは、Angular CLI 14 を使用して作成された新しいプロジェクトであり、https://tailwindcss.com/docs/guides/angular

の手順に従って tailwind がインストールされています。

エラーで提供されたリンクで指定されているように、postcss.config.js ファイルをプロジェクトに追加しようとしましたが、何も起こっていないようです:

ああああ

Answer 1

SCSS で tailwind を使用しているときに同じ問題を抱えている人のために、styles.scss ファイルから次のインポートを削除することで問題を解決しました。

@インポート URL('./styles/utility.scss');

url は CSS 固有の構文であるため、tailwind (正確には postcss) は括弧内のファイルが常に CSS ファイルになると考えていると思います。したがって、ネストが発生すると、エラーがスローされます。

CSS をインポートするときに SCSS で指定された @use 構文を使用することで解決しました。

https://sass-lang.com/documentation/at-rules/use/