feat: css import on demand

build/vite/plugin/index.ts

@@ -11,6 +11,7 @@ import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configGzipPlugin } from './gzip';
+import { configStyleImportConfig } from './style-import';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: string) {
@@ -28,6 +29,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: stri
   // vite-plugin-purge-icons
   vitePlugins.push(PurgeIcons());
 
+  // vite-plugin-style-import
+  vitePlugins.push(configStyleImportConfig());
+
   // rollup-plugin-gzip
   vitePlugins.push(configGzipPlugin(isBuild));
 

build/vite/plugin/style-import.ts

@@ -0,0 +1,27 @@
+import styleImport from 'vite-plugin-style-import';
+
+export function configStyleImportConfig() {
+  const pwaPlugin = styleImport({
+    libs: [
+      {
+        libraryName: 'ant-design-vue',
+        resolveStyle: (name) => {
+          // ! col row popconfirm These three components have no corresponding css files after packaging. Need special treatment
+
+          if (['col', 'row'].includes(name)) {
+            return 'ant-design-vue/lib/grid/style/index.css';
+          }
+
+          if (['popconfirm'].includes(name)) {
+            return [
+              'ant-design-vue/lib/popover/style/index.css',
+              'ant-design-vue/lib/button/style/index.css',
+            ];
+          }
+          return `ant-design-vue/lib/${name}/style/index.css`;
+        },
+      },
+    ],
+  });
+  return pwaPlugin;
+}