vant-ui 如何定制主题

定制主题一般发生在我们需要对又有组件颜色都要整体统一时用到。vant在vant/lib/style/var.less中预定义了很多的变量。主要包括一些颜色值和变量名。如图：

官方的说明其实写的不够详细。在这过程中遇到了一些坑。

主要步骤：

----------------------------------------------------------------------------------------------

第一步

1:需要在main.js引入less文件。具体说应该是nodemoudule文件夹下 vant/lib/index.less

----------------------------------------------------------------------------------------------

第二步:

我们需要建立一个less文件。在这个less文件中定义同名变量，然后修改其颜色值。（假设这个less文件为restLess.less）

比如button组件。注意type值的颜色 当给button设置type=‘’primary‘’，按钮的颜色就成了绿色。那是因为在var.less文件中，primary对应的颜色是@green.所以如果我们想当给所有的按钮设置type='primary‘时，改其颜色为蓝色。我们只需要在我们这个文件restLess.less中找到primary对应的变量，再改变其颜色。如图

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，才可以达到效果

如图：

按钮颜色已经由默认的绿色变成了蓝色