自定义Vant主题色
定制主题：官方配置
1.本地新建基础样式文件 vant.less
image.png
可重新配置颜色变量,更多变量名可查看配置文件
// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f7f8fa;
@background-color-light: #fafafa;
2.安装less
npm install less less-loader --save-dev
3.main.js引入less文件
image.png
// 引入全部样式
import 'vant/lib/index.less';
这里是引入全部样式，因为我是导入全部组件的，如果按照官方配置按需引入会报错‘Vant is not defined’
4.vue.config.js 中进行配置
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "~@/styles/vant.less";`,
},
},
},
},
},
};
注意：如果没有效果，请移除 lessOptions 这一级，直接配置选项
