需要修改vant元件的顏色或其他的樣式時，可以用以下方法進行自定義修改。

一個簡單的效果：

用Vant官方提供的方法進行定製：

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

// 引入單個元件樣式
import 'vant/lib/button/style/less';

用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}"
 
;`
                }
            },
        }
    },
}

參考官網提供的樣式變數

在控制檯選中元素，獲取class類名，雙擊選中複製

<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>

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