chore: css is no longer imported on demand

README.md

@@ -131,7 +131,6 @@ If these plugins are helpful to you, you can give a star support
 
 - [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Used for local and development environment data mock
 - [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - Used for html template conversion and compression
-- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - Used for component library style introduction on demand
 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - Used for online switching of theme colors and other color-related configurations
 - [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - Used to pack input .gz|.brotil files
 - [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - Used to quickly generate svg sprite

README.zh-CN.md

@@ -141,7 +141,6 @@ pnpm build
 
 - [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - 用于本地及开发环境数据 mock
 - [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
-- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - 用于组件库样式按需引入
 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于在线切换主题色等颜色相关配置
 - [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
 - [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图

build/vite/plugin/imagemin.ts

-// Image resource files used to compress the output of the production environment
-// https://github.com/anncwb/vite-plugin-imagemin
-import viteImagemin from 'vite-plugin-imagemin';
-
-export function configImageminPlugin() {
-  const plugin = viteImagemin({
-    gifsicle: {
-      optimizationLevel: 7,
-      interlaced: false,
-    },
-    optipng: {
-      optimizationLevel: 7,
-    },
-    mozjpeg: {
-      quality: 20,
-    },
-    pngquant: {
-      quality: [0.8, 0.9],
-      speed: 4,
-    },
-    svgo: {
-      plugins: [
-        {
-          name: 'removeViewBox',
-        },
-        {
-          name: 'removeEmptyAttrs',
-          active: false,
-        },
-      ],
-    },
-  });
-  return plugin;
-}

build/vite/plugin/index.ts

@@ -4,12 +4,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import purgeIcons from 'vite-plugin-purge-icons';
 import windiCSS from 'vite-plugin-windicss';
 import VitePluginCertificate from 'vite-plugin-mkcert';
-//import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configCompressPlugin } from './compress';
-import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configSvgIconsPlugin } from './svgSprite';
@@ -44,9 +42,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-purge-icons
   vitePlugins.push(purgeIcons());
 
-  // vite-plugin-style-import
-  vitePlugins.push(configStyleImportPlugin(isBuild));
-
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());
 

build/vite/plugin/styleImport.ts

-/**
- *  Introduces component library styles on demand.
- * https://github.com/anncwb/vite-plugin-style-import
- */
-import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import';
-
-export function configStyleImportPlugin(_isBuild: boolean) {
-  if (!_isBuild) {
-    return [];
-  }
-  const styleImportPlugin = createStyleImportPlugin({
-    libs: [
-      {
-        libraryName: 'ant-design-vue',
-        esModule: true,
-        resolveStyle: (name) => {
-          // 这里是无需额外引入样式文件的“子组件”列表
-          const ignoreList = [
-            'anchor-link',
-            'sub-menu',
-            'menu-item',
-            'menu-divider',
-            'menu-item-group',
-            'breadcrumb-item',
-            'breadcrumb-separator',
-            'form-item',
-            'step',
-            'select-option',
-            'select-opt-group',
-            'card-grid',
-            'card-meta',
-            'collapse-panel',
-            'descriptions-item',
-            'list-item',
-            'list-item-meta',
-            'table-column',
-            'table-column-group',
-            'tab-pane',
-            'tab-content',
-            'timeline-item',
-            'tree-node',
-            'skeleton-input',
-            'skeleton-avatar',
-            'skeleton-title',
-            'skeleton-paragraph',
-            'skeleton-image',
-            'skeleton-button',
-          ];
-          // 这里是需要额外引入样式的子组件列表
-          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
-          const replaceList = {
-            textarea: 'input',
-            'typography-text': 'typography',
-            'typography-title': 'typography',
-            'typography-paragraph': 'typography',
-            'typography-link': 'typography',
-            'dropdown-button': 'dropdown',
-            'input-password': 'input',
-            'input-search': 'input',
-            'input-group': 'input',
-            'radio-group': 'radio',
-            'checkbox-group': 'checkbox',
-            'layout-sider': 'layout',
-            'layout-content': 'layout',
-            'layout-footer': 'layout',
-            'layout-header': 'layout',
-            'month-picker': 'date-picker',
-            'range-picker': 'date-picker',
-            'image-preview-group': 'image',
-          };
-
-          return ignoreList.includes(name)
-            ? ''
-            : replaceList.hasOwnProperty(name)
-            ? `ant-design-vue/es/${replaceList[name]}/style/index`
-            : `ant-design-vue/es/${name}/style/index`;
-        },
-      },
-    ],
-    resolves: [VxeTableResolve()],
-  });
-  return styleImportPlugin;
-}

package.json

@@ -180,10 +180,8 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.8.1",
     "vite-plugin-pwa": "^0.11.13",
-    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-theme": "^0.8.6",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-plugin-windicss": "^1.8.4",
     "vue-eslint-parser": "^8.3.0",
     "vue-tsc": "^1.0.9"

src/main.ts

@@ -3,6 +3,7 @@ import 'virtual:windi-components.css';
 import '/@/design/index.less';
 import '/@/components/VxeTable/src/css/index.scss';
 import 'virtual:windi-utilities.css';
+import 'ant-design-vue/dist/antd.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 import App from './App.vue';
@@ -16,12 +17,6 @@ import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
-import { isDevMode } from './utils/env';
-
-if (isDevMode()) {
-  import('ant-design-vue/es/style');
-}
-
 async function bootstrap() {
   const app = createApp(App);