vue项目中引入vant组件,若发现vant组件样式失效,通常有以下几种解决方法:
方法一:引入全局样式
在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码:
import 'vant/lib/index.css'
这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可。
方法二:局部引入样式
顾名思义,我们需要使用哪个组件,就引入哪个组件样式即可,比如我们只使用按钮组件,则只需要引入按钮样式,如下:
import 'vant/lib/button/style'
方法三:插件自动引入
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。第一步需要安装插件:
# 安装插件
npm i babel-plugin-import -D
第二步在.babelrc或babel.config.js的对应位置添加如下代码,重启之后即可生效。
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};