VueCli2 配置Vant主題

• 官網
• VueCli2不支援按需引入，隻能全部引入

安裝依賴

• npm install -D less@3 less-loader@5

"vant": "^2.9.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
           

更改.babelrc

{
  "plugins": [
    [
      "import",
        {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }
    ]
  ]
}
           

在main.js中引入vant的less檔案

• 這裡要注意一點Vant元件也要在這裡全局引入，不然會導入多份樣式，下圖說明了這個問題

  

• 引入方式

import {NavBar, Col, Row, Popup, Picker, Switch} from 'vant';
Vue.use(NavBar).use(Col).use(Row).use(Popup).use(Picker).use(Switch);
import 'vant/lib/index.less';// 引入vant全部樣式
           

建立自定義主題變量檔案less

• 比如放在

  src/less/vant_theme.less

檢視官方主題定義

• 可以根據官方定義的主題做響應修改

@white:white;
// NavBar
@nav-bar-background-color:#5077aa;
//@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @white;
@nav-bar-text-color: @white;
@nav-bar-title-text-color: @white;
//@nav-bar-z-index: 1;

           

修改配置檔案中的build/utils.js代碼

• 修改前

less: generateLoaders('less'),
           

• 修改後

less: generateLoaders('less', {
      modifyVars: {
        // '@white': '#5077aa;',
        'hack': `true; @import "${path.join(__dirname, '../src/less/vant_theme.less')}";`
      }
    }),
           

本文來自部落格園，作者：struggle_time，轉載請注明原文連結：https://www.cnblogs.com/songliquan/p/13279423.html