Vant主题定制方法

  • 使用场景：
  • 第一种：完全替换主题色或其他样式
  • 1.main.js引入样式原文件
  • 2.创建less文件
  • 3.修改配置
  • 4.修改样式
  • 第二种：直接覆盖样式
  • 1.找到class类名
  • 2.修改样式

使用场景：

需要修改vant组件的颜色或其他的样式时，可以用以下方法进行自定义修改。

Vant主题定制修改颜色样式_ide

一个简单的效果：

Vant主题定制修改颜色样式_ide_02

第一种：完全替换主题色或其他样式

用Vant官方提供的方法进行定制：

1.main.js引入样式原文件

// 引入全部样式
import 'vant/lib/index.less';

// 引入单个组件样式
import 'vant/lib/button/style/less';

2.创建less文件

Vant主题定制修改颜色样式_ide_03

3.修改配置

用vue-cli搭建的可以直接在vue.config.js中更改配置：

const path = require("path");
//less文件的路径
const myTheme = path.resolve(__dirname, "./src/assets/less/vantChange.less");

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import "${myTheme}";`
                }
            },
        }
    },
}

4.修改样式

参考官网提供的样式变量

Vant主题定制修改颜色样式_类名_04Vant主题定制修改颜色样式_使用场景_05

第二种：直接覆盖样式

1.找到class类名

在控制台选中元素，获取class类名，双击选中复制

Vant主题定制修改颜色样式_使用场景_06

2.修改样式

<style lang="less" scoped>
.van-sidebar-item--select::before{
  background-color:#CCCCFF;
}
.van-sidebar-item--select, .van-sidebar-item--select:active{
  background-color:#FFCCCC;
  color:white;
}
</style>

大功告成啦

撒花~ ✿✿✿



更多内容详见微信公众号：Python研究所

Vant主题定制修改颜色样式_ide_07