Vant修改主體顏色樣式

使用場景：

需要修改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>

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