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