Saya mempunyai beberapa css bersarang dalam salah satu fail css komponen saya. Apabila saya melakukan "ngserve" CSS tidak berfungsi dan saya mendapat ralat ini:
(11:5) 檢測到嵌套 CSS,但 CSS 嵌套尚未正確配置。請在您的配置中 *before* Tailwind 啟用 CSS 嵌套插件。請參閱此處:https://tailwindcss.com/docs/using-with-preprocessors#nesting
Ini ialah projek baharu yang dibuat menggunakan Angular CLI 14, dengan tailwind dipasang mengikut arahan di sini: https://tailwindcss.com/docs/guides/angular
Saya cuba menambahkan fail postcss.config.js pada projek saya seperti yang dinyatakan dalam pautan yang disediakan dalam ralat, tetapi nampaknya tiada apa yang berlaku:
module.exports = { plugins: { 'postcss-import': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, } }
Bagi sesiapa yang mempunyai masalah yang sama menggunakan tailwind dengan SCSS, saya menyelesaikannya dengan mengalih keluar import berikut daripada fail styles.scss
:
@import url('./styles/utility.scss');
Memandangkan url
ialah sintaks khusus CSS, tekaan saya ialah tailwind (atau lebih tepatnya postcss) berpendapat bahawa fail di dalam kurungan akan sentiasa menjadi fail CSS. Oleh itu, sebaik sahaja bersarang ditemui, ralat dilemparkan.
Diselesaikan dengan menggunakan sintaks @use yang ditentukan oleh SCSS semasa mengimport CSS: https://sass-lang.com/documentation/at-rules/use/