在vant开发指南中,查阅 “定制主题” 模块。查看自定义主题方法:
https://youzan.github.io/vant/v2/#/zh-CN/theme
Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
vue2中使用vant自定义主题参考步骤:
(1)# Vue 2 项目,安装 Vant 2:npm i vant@latest-v2 -S
(2)‘main.js’ 文件中 引入 vant 样式:import ‘vant/lib/index.less’;
(3) 在src文件下创建一个 文件存放 主题样式,例如:‘theme.less’
(4) 在开发页面使用调试工具找到 要改样式的元素 的类名,在vant文档中找到组件 中该元素的 样式变量,在 ‘theme.less’ 中 定义该样式变量,值设置为自己所需的
‘theme.less’:
@blue: #007bff;
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;
(5) 在项目根目录下创建 ‘vue.config.js’ 文件,添加如下配置:
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
// 或者可以通过 less 文件覆盖(文件路径为绝对路径)
hack: `true; @import "${themePath}";`,
},
},
},
},
};