首先说说为什么只对样式文件进行按需引入因为vite2已经内置支持组件的按需引入
然后说一下如何配置
//1. 安装插件
npm i vite-plugin-style-import -D
// 2. 在vite.config.js导入插件
import styleImport from 'vite-plugin-style-import';
// 3. 在vite.config.js配置插件
export default defineConfig((env)=>{
return {
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/css`;
},
},{
libraryName: 'ivz-online',
esModule: true,
resolveStyle: (name) => {
return `ivz-online/dist/index.css`;
},
}]
})
],
}
})
配置字段说明
libraryName: 用来声明你导入的组件属于哪个库
// 当你导入Button组件的时候会声明是属于哪个库的,这个名称对应上就可以
import {Button} from 'ant-design-vue'
resolveStyle:导入样式文件的工厂方法,其中name参数是组件名称比如:Button, 当你使用了Button组件后插件会在编译或者开发时自动导入 ant-design-vue/es/${name}/style/css样式文件
// 可以通过打印日志查看导入的组件样式
resolveStyle: (name) => {
console.log(name)
return `ant-design-vue/es/${name}/style/css`;
},