vue如何解决vant引入组件样式失效问题

在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']
  ]
};

以上这篇vue如何解决vant引入组件样式失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。