vant-ui 如何定制主题
定制主题一般发生在我们需要对又有组件颜色都要整体统一时用到。vant在vant/lib/style/var.less中预定义了很多的变量。主要包括一些颜色值和变量名。如图：
官方的说明其实写的不够详细。在这过程中遇到了一些坑。
主要步骤：
----------------------------------------------------------------------------------------------
第一步
1:需要在main.js引入less文件。具体说应该是nodemoudule文件夹下 vant/lib/index.less
----------------------------------------------------------------------------------------------
第二步:
我们需要建立一个less文件。在这个less文件中定义同名变量，然后修改其颜色值。（假设这个less文件为restLess.less）
比如button组件。
resetLess.less (修改前：默认是绿色)
resetLess.less(修改后该绿色为蓝色)
----------------------------------------------------------------------------------------------
第三步:
也是非常关键的一步：我们需要在webpack中对less-loader的rule下做如下配置：
我这里使用的脚手架是2.0版本的。webpack对less-loader的处理逻辑写在了build/utils.js下。而不是webpack.base.config.js下。
如图：
找到generateLoaders函数的return 最后的less栏：按照vant官方的说明添加：
modifyVars: {
'hack': `true; @import "your-less-file-path.less";` }
}注意。@import 就是我们事前定义好的resetLess.less文件路径。这里必须要用绝对路径。针对我们的实例。修改成红框内所示
----------------------------------------------------------------------------------------------
第四步：
也是最容易忽略的一步：
我们需要对.babelrc文件做一些修改：
"plugins": ["transform-vue-jsx", "transform-runtime",["import", {
"libraryName": "vant",
// "style": true
}]]
注意：我们这里删除了style：true，
----------------------------------------------------------------------------------------------
第五步：
需要关闭本地localhost:8080，重新开启。重新编译less，才可以达到效果
如图：
按钮颜色已经由默认的绿色变成了蓝色