Vant主题定制修改颜色样式

Vant主题定制方法

使用场景:

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

Vant主题定制修改颜色样式

 

 一个简单的效果:

Vant主题定制修改颜色样式

 

 

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

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

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

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

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

2.创建less文件

Vant主题定制修改颜色样式

 

 

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主题定制修改颜色样式

 

 Vant主题定制修改颜色样式

 

 

第二种:直接覆盖样式

1.找到class类名

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

Vant主题定制修改颜色样式

 

 

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>

转载:https://blog.csdn.net/weixin_48774523/article/details/111770822

上一篇:uniapp使用 Vant Weapp 组件(亲测有效)


下一篇:uni-app创建项目及使用 vant-weapp