vant样式不起作用,vant如何去除组件默认的样式

　　本文主要介绍了vue中vant组件风格失效的问题及解决方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vant组件样式无效。修改vant组件样式通常有以下几种解决方案。

vant组件样式失效

　　在vue项目中引入Vant组件，如果发现vant组件的样式无效。

通常有以下几种解决方法

　　方法一：引入全局样式

　　vant组件的所有样式都在引入vant组件的地方或全球引入。介绍方法是：在vue介绍vant的页面添加以下代码：

　　导入 vant/lib/index.css

　　这样vant的所有风格都可以引入，但是通常我们可以按需引入，比如第二种方法，也可以局部引入一些风格。

　　方法二：局部引入样式

　　顾名思义，我们可以介绍我们需要使用哪个组件的样式。例如，如果我们只使用按钮组件，我们只需要介绍按钮样式，如下所示：

　　导入虚拟/库/按钮/样式

　　方法三：插件自动引入

　　Babel-plugin-import是一个Babel插件，在编译时会自动将import的编写转换成按需引入的方式。

　　第一步是安装插件：

　　#安装插件

　　巴别-插件-导入-D

　　第2步在* * * *的对应位置添加下面的代码。babelrc***或***babel.config.js*** *，重启后生效。

　　//在中添加配置。巴伯尔克

　　//注意：webpack 1不需要设置libraryDirectory

　　{

　　插件:[

　　[导入，{

　　库名:虚拟，

　　库目录: es ，

　　 style :对

　　}]

　　]

　　}

　　//对于使用babel7的用户，可以在babel.config.js中配置

　　模块.导出={

　　插件：[

　　[导入，{

　　库名：“虚拟”，

　　库目录：“es”，

　　风格：真实

　　}， vant]

　　]

　　};

修改vant组件样式

　　样式范围添加范围。搜索图标。van-icon-search { color:# fff；}

　　/风格

　　SearchIcon是一个新的类名。van-icon-search是vant组件标签名称。可以修改vant自己的组件类名，中间带穿透。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。