使用 antd-v 的时候样式全无了

[gh-nom]

vite2.7.10 and vue3 我还使用了 unplugin-vue-components 的按需导入，我不确定到底是哪里出现了问题 ,导致antdv所有的样式都丢失了 vite-plugin-theme-preprocessor ：1.4.5

这是我的 vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
import path from 'path'
import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
import styleImport from 'vite-plugin-style-import';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 80,
        cors: true,
        proxy: { 
            '^/api': {
                target: 'http://192.168.50.17:10000',
                changeOrigin: true, //开启代理
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
    optimizeDeps: {
        exclude: ["@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"],
    },
    plugins: [
        vue(),

        Components({
            dts: true,
            dirs: ['src/views', 'src/components'],
            resolvers: [AntDesignVueResolver({
                importStyle: 'less',
            })],
            directoryAsNamespace: true
        }),
        themePreprocessorPlugin({
            less: {
                arbitraryMode: false,
                multipleScopeVars: [
                    {
                        scopeName: "light",
                        path: path.resolve("src/assets/theme/light.less"),
                    },
                    {
                        scopeName: "dark",
                        path: path.resolve("src/assets/theme/dark.less"),
                    },
                ],
                defaultScopeName: "light",
                extract: true,
            },
        }),
        styleImport({
            libs: [
                {
                    libraryName: 'ant-design-vue',
                    esModule: true,
                    resolveStyle: (name) => {
                        return `ant-design-vue/es/${name}/style/index`
                    },
                },
            ],
        }),
        PkgConfig(),
        OptimizationPersist()
    ],
    resolve: {
        alias: {
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
        }
    },
    build: {
        target: 'es2015',
        outDir: 'dist',
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        }
    }
})

[GitOfZGT]

你可能重复用了按需插件，如果用unplugin-vue-components，就不需要其他按需插件，删掉试试看

[gh-nom]

你可能重复用了按需插件，如果用unplugin-vue-components，就不需要其他按需插件，删掉试试看

这个是unplugin-vue-components 的 Issues 推出的解决方案，用于antd-v messge等动态组件的样式引入，不过很有可能是unplugin-vue-components的问题

[gh-nom]

并不是完全样式全无，有时候它也会有一段时间 就像是 magic 一样很神奇