同时按需引入elementUI和vant,出现vant样式不生效的问题

565 阅读1分钟

在开发过程中同时按需引入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]);
}

image.png
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",
  ]
}

image.png