Ralat Sudut 14: CSS bersarang dikesan, tetapi sarang CSS dikonfigurasikan secara salah

Question

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: {},
      }
    }

Answer 1

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/< /a>