Vant主题定制修改颜色样式

最新推荐文章于 2025-01-28 18:14:42 发布

小迷糊爱丽丝

最新推荐文章于 2025-01-28 18:14:42 发布

阅读量1.4w

点赞数 9

分类专栏： Vue 文章标签： vue.js less

本文链接：https://blog.csdn.net/weixin_48774523/article/details/111770822

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

当需要修改Vant组件的颜色或样式时，可以通过两种方式进行定制：一是完全替换主题色，涉及在main.js引入样式原文件、创建less文件、修改配置和样式；二是直接覆盖样式，通过在控制台找到组件class名并直接修改样式。按照教程步骤操作，即可成功实现Vant组件的个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：

需要修改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类名，双击选中复制
在控制台选中元素获取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>