怎么更改vant组件的样式,
本文主要介绍基于Vue cli开发和修改外部组件Vant默认样式的详细说明。在本文中通过示例代码非常详细，对大家的学习或工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
前言一、less二、介绍你的组件三、修改配置文件第一步：直接介绍Less文件第二步：修改样式变量摘要
前言
在引入外部组件时，如果要修改默认样式，可以通过class修改，但通常会有权重不够等各种原因。官网居然列出了一套主题定制方案，通过覆盖配置文件来修改风格。官网地址：主题定制。
提示：以下是本文的主要内容，以下案例可供参考。
一、Less
因为Vant使用Less对样式进行预处理，并且内置了一些样式变量，所以可以通过替换样式变量来自定义自己的主题。
用更少的资源配置您的项目：
npm安装较少-保存-开发
npm安装较少-加载程序-保存-开发
配置完后，试试能不能少用。如果报告了错误，通常是由高版本引起的。
你可以试着降低版本。
“少装者”:^5.0.0，
二、引入你的组件
例如，我在这里介绍了Tab选项卡组件。
van-tabs v-model=active
Van-tab title= label 1 内容1/van-tab
Van-tab title= Label 2 内容2/van-tab
Van-tab title=标签3 内容3/van-tab
Van-tab title= label 4 内容4/van-tab
/van-tab
导出默认值{
data() {
返回{
活跃：2，
};
},
};
它有默认的样式，如活动字体颜色，底部状态颜色等。
三、修改配置文件
第一步：直接引入less文件
main.js中的简介：
导入“vant/lib/index . less”；
第二步：修改样式变量
找到你的vue.config.js文件。如果没有，在与package.json相同的级别创建一个新的配置文件，并添加代码：
模块.导出={
css: {
loaderOptions: {
减：{
//如果less-loader的版本低于6.0，请去掉lessOptions的级别，直接配置选项。
lessOptions: {
修改版本：{
//直接覆盖变量
text-color: #111 ，
边框颜色: #eee ，
//或者它可以被一个更小的文件覆盖(文件路径是绝对的)
黑客：`真的；@ import your-less-file-path . less ；`,
},
},
},
},
},
};
可以直接修改变量，也可以把列表列为less文件引入。请注意，如果less版本较低，请遵循代码中的注释。
回到标签组件的前一个文档，向下滑动找到样式变量。
然后它定义了一些关于组件的样式，你可以通过它的名字来修改你需要修改的样式，比如@tab-active-text-color，应该是激活状态后字体的颜色。好了，现在我需要把它修改成我想要的颜色，所以在配置文件里修改。
再次重启服务器，可以看到组件的样式已经改变。
总结
关于基于Vue cli开发修改外部组件Vant默认样式的详细说明，本文到此为止。关于Vuecli Vant默认样式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。