vant定制主题（亲测有效记录）

vant定制主题

https://youzan.github.io/vant/#/zh-CN/theme 这是官网给的说明，官方的说明其实写的不够详细。在这过程中遇到了一些坑。

一、为什么需要自定义主题。

  当vant的主题不满足你的要求时可以根据自己的要求进行修改，比如：所有的颜色要改。

二、自定义主题

vue cli3.0版本的

主要步骤：

---

第一步

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

import 'vant/lib/index.less';

第二步

安装less

npm install less less-loader --save-dev

---

第三步

创建属于自己的less,比如：resetui.less

第四步

引入自己的less
打开vue.config.js文件，找到如下图：
注意：${path.join(__dirname,‘自己的less文件所在位置’)}是获取绝对路径
按照vant官方的说明添加：

   modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${path.join(
            __dirname,
            "./src/assets/common/resetui.less"//这个import 的路径必须是绝对路径
          )}";`
          //hack: `true; @import "@/common/resetui.less";`
        }

---

第五步

也是最容易忽略的一步：

我们需要对babel.config.js文件做一些修改：

"plugins": ["transform-vue-jsx", "transform-runtime",["import", {

"libraryName": "vant",

// "style": true

}]]

注意：我们这里删除了style：true，

---

第六步

修改vant样式，这是less变量参考：https://github.com/youzan/vant/blob/dev/src/style/var.less，我贴了一些button变量，到自己的less文件中。

第七步

需要关闭本地localhost:8080，重新开启。重新编译less，才可以达到效果

修改之前：

修改之后：