Vant主題定制修改顏色樣式

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>

轉載：https://blog.csdn.net/weixin_48774523/article/details/111770822