vue解决vant组件样式失效问题

2022年7月7日08:17:43

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']]};
  • 作者:Saga Two
  • 原文链接:https://blog.csdn.net/m0_46309087/article/details/109502043
    更新时间:2022年7月7日08:17:43 ,共 718 字。