用于按需引入组件库样式的插件。
以上两个插件可以实现按需引入组件库样式,尝试后发现vite-plugin-imp这个插件目前有个问题是,它支持按照组件动态引入组件内部的样式,但是antd还定义了一些全局样式,比如对a标签的样式重写,这部分样式没有被正确引入。所以我建议使用vite-plugin-style-import
yarn add vite-plugin-style-import -D
npm i vite-plugin-style-import -D
//效果
import { Button } from 'ant-design-vue';
↓ ↓ ↓ ↓ ↓ ↓
import { Button } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/index.js';
import { ElButton } from 'element-plus';
↓ ↓ ↓ ↓ ↓ ↓
// dev
import { Button } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-button.css`;
// prod
import Button from 'element-plus/lib/el-button';
import 'element-plus/lib/theme-chalk/el-button.css';
配置:
import { UserConfigExport } from 'vite'
import {
createStyleImportPlugin,
AndDesignVueResolve,
VantResolve,
ElementPlusResolve,
NutuiResolve,
AntdResolve,
} from 'vite-plugin-style-import'
export default (): UserConfigExport => {
return {
// 1. If you are using the ant-design series, you need to configure this
// 2. Make sure less is installed in the dependency `yarn add less -D`
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
plugins: [
createStyleImportPlugin({
resolves: [
AndDesignVueResolve(),
VantResolve(),
ElementPlusResolve(),
NutuiResolve(),
AntdResolve(),
],
libs: [
// If you don’t have the resolve you need, you can write it directly in the lib, or you can provide us with PR
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`
},
},
],
}),
],
}
}
若是启动报错:consola没有需要安装
npm i consola -D