fix 联邦组件样式冲突问题

examples/plugin-component/vite.config.js

@@ -21,10 +21,12 @@ export default defineConfig({
         vuetify: {
           requiredVersion: false,
           generate: false,
+          singleton: true,
         },
         'vuetify/styles': {
           requiredVersion: false,
           generate: false,
+          singleton: true,
         },
       },
       format: 'esm'
@@ -33,7 +35,48 @@ export default defineConfig({
   build: {
     target: 'esnext',   // 必须设置为esnext以支持顶层await
     minify: false,      // 开发阶段建议关闭混淆
-    cssCodeSplit: false,
+    cssCodeSplit: true, // 改为true以便能分离样式文件
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vuetify-lib': ['vuetify']  // 将vuetify单独分离出来
+        }
+      }
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '/* 覆盖vuetify样式 */',
+      }
+    },
+    postcss: {
+      plugins: [
+        {
+          postcssPlugin: 'internal:charset-removal',
+          AtRule: {
+            charset: (atRule) => {
+              if (atRule.name === 'charset') {
+                atRule.remove();
+              }
+            }
+          }
+        },
+        {
+          postcssPlugin: 'vuetify-filter',
+          Root(root) {
+            // 过滤掉所有vuetify相关的CSS
+            root.walkRules(rule => {
+              if (rule.selector && (
+                  rule.selector.includes('.v-') || 
+                  rule.selector.includes('.mdi-'))) {
+                rule.remove();
+              }
+            });
+          }
+        }
+      ]
+    }
   },
   server: {
     port: 5001,   // 使用不同于主应用的端口