在开发过程中同时按需引入elementUi和vantUI组件使用,会出现vant相关样式不生效的问题。
按照官网下载了插件,配置了按需引入的配置还是不行,后来又试了手动直接引入css文件,还是不行,后来发现是手动引入css文件的位置不对,要放在按需引入vant这行代码下引入,放在前面或者引入elementUI的后面也不行,记录一下。
1、先下载elementUi和babel-plugin-component插件
npm install element-ui
npm install babel-plugin-component -D
2、下载vant和babel-plugin-import插件
npm i vant -S
npm i babel-plugin-import -D
3、在main.js按需引入elementUI和vant
import { Field, Popup, Picker, Icon, Toast, DatetimePicker, Pagination } from 'vant';
// 按需引入UI组件,出现样式不生效的问题,目前先手动引入相关样式
import 'vant/lib/index.css'; // 一定要发在引入vant这一行代码之后,不能发在use之后,否则会出现vant样式不生效的问题
const VantObj = { Field, Popup, Picker, Icon, Toast, DatetimePicker, Pagination };
for (let key in VantObj) {
Vue.use(VantObj[key]);
}
import {Input, Select, Option, Form, FormItem } from "element-ui";
// 按需引入UI组件,出现样式不生效的问题,目前先手动引入相关样式
import 'element-ui/lib/theme-chalk/index.css';
const ElementObj = {Input, Select, Option, Form, FormItem };
for (let key in ElementObj) {
Vue.use(ElementObj[key]);
}
4、在.babelrc.js上分别配置vant和elementUi按需引入的相关配置
module.exports = {
"presets": ['@vue/cli-plugin-babel/preset', ["@babel/preset-env", { "modules": false}]],
"plugins": [
// 样式是否也按需加载,vant配置在elementUi前面
["import", {"libraryName": "vant","libraryDirectory": "es","style": true},"vant"],
["component", {"libraryName": "element-ui","styleLibraryName": "theme-chalk"}],
"syntax-dynamic-import",
"transform-object-rest-spread",
]
}