vue使用Vant自定义主题

https://youzan.github.io/vant/#/zh-CN/theme 这是官网给的说明，个人感觉有点坑，对于我这中vue小白实在是看不明白 。

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

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

二、自定义主题

1、在main.js中引入less

import 'vant/lib/index.less';

                                                        

2、创建属于自己的less,比如：index.less

                                                               

3、引入自己的less

打开utils.js文件，找到如下图：

            

把图中画红框的部分，修改成为：

    less: generateLoaders('less', {
      modifyVars: {
        'hack': `true; @import "${path.join(__dirname, '../src/assets/less/index.less')}";`
      }
    }),

注意：${path.join(__dirname,'自己的less文件所在位置')}是获取绝对路径

4、安装less

npm install less less-loader --save-dev

5、启动测试，如果不报错，恭喜你成功了。如果启动失败，绝大多数是因为版本的问题，不同版本之间配置文件有些差别

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

7、我们修改@blue的颜色，看看是否有变化

                                                        

                                                                                     修改之前

我们把@blue: #008FD7;改为@blue: red;看下效果

                                                     

 

                                                                                  修改之后

 

欢迎扫码关注微信公众号

                                                    

http://www.qingqie.cn/