嵌套 Nuxt + Tailwind（请在配置中 *before* Tailwind 启用 CSS 嵌套插件）

Question

使用 Nuxt v2.15.8 + Tailwind。在 npm run dev 和每次刷新之后使用的所有文件中都会发出有关嵌套的警告，例如

 WARN  in ./components/Cabinet/CabinetSidebar/CabinetSidebarMenu.vue?vue&type=style&index=0&lang=postcss&

友好错误 18:24:59

    Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):                           

友好错误 18:24:59 警告

    (99:2) Nested CSS was detected, but CSS nesting has not been configured correctly.
    Please enable a CSS nesting plugin *before* Tailwind in your configuration.
    See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

文件 nuxt.config.js

import 'reflect-metadata'
import { join } from 'path'
const isProd = process.env.NODE_ENV === 'production'
export default {

    head: {...},

    css: ['~assets/css/styles.css'],
    loading: false,

    components: {
        dirs: ['~/components', '~/components/Base'],
    },

    buildModules: [
        '@nuxt/typescript-build',
        'nuxt-typed-vuex',
        '@nuxtjs/router-extras',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/composition-api/module',
    ],
    tailwindcss: {
        configPath: 'tailwind.config.js',
        cssPath: '~/assets/css/tailwind.css',
        // jit: true,
        exposeConfig: true,
        config: {},
    },
    modules: [
        // 'nuxt-ssr-cache',
        // 'nuxt-lazy-load',
        'vue-scrollto/nuxt',
        '@nuxtjs/axios',
        'nuxt-i18n',
        '@nuxtjs/svg',
        'cookie-universal-nuxt',
        '@nuxtjs/toast',
        '@nuxtjs/google-analytics'
    ],

    build: {
        postcss: {
            plugins: {
                'postcss-import': true,
                'postcss-nested': {},
            },
        },
    },
}

没有找到有关此错误的信息，也许有人可以建议解决方案

Answer 1

正如 Dmitry 本人在评论中提到的，要解决这个问题，应该将 'tailwindcss/nesting': {} 添加到 'nuxt.config' 文件的构建部分中的 postcss 插件中，所以它会是这样的：

build: {
    postcss: {
        plugins: {
            'postcss-import': true,
            'tailwindcss/nesting': {}, 
             'postcss-nested': {},
        },
    },
},