第五十五章-Vite插件-vite-plugin-style-import

1.说明

vite-plugin-style-import的npm首页。

该插件可按需导入组件库样式，由于 vite 本身已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可。

2.安装

yarn add vite-plugin-style-import --dev

3.配置插件

build\vite\plugin\styleImport.ts：

/**
 *  Introduces component library styles on demand.
 * https://github.com/anncwb/vite-plugin-style-import
 */
import styleImport from 'vite-plugin-style-import';

export function configStyleImportPlugin() {
  // if (!isBuild) return [];
  const pwaPlugin = styleImport({
    libs: [
      {
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/index`;
        },
      },
    ],
  });
  return pwaPlugin;
}

4.配置Vite

build\vite\plugin\index.ts：

// ...
import { configStyleImportPlugin } from './styleImport';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // vite-plugin-style-import
  vitePlugins.push(configStyleImportPlugin());

  return vitePlugins;
}

上一章

第五十四章-Vite插件-vite-plugin-purge-icons

下一章

第五十六章-Vite插件-rollup-plugin-visualizer