VueCli2 配置Vant主题

阅读目录

• 安装依赖
• 更改.babelrc
• 在main.js中引入vant的less文件
• 创建自定义主题变量文件less
• 修改配置文件中的build/utils.js代码

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')}";`
      }
    }),