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/