Vant主题定制修改颜色样式

此文转载自：https://blog.csdn.net/weixin_48774523/article/details/111770822

Vant主题定制方法

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

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

一个简单的效果：

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

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

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

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

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

2.创建less文件

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.修改样式

参考官网提供的样式变量

第二种：直接覆盖样式

1.找到class类名

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

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>

大功告成啦
_撒花~ ✿✿✿