Vue 2.5.2引入Vant 2.5.9定制主题

1.在vue中的main.js中引入vant，当然要先安装Vant，注意引入的是index.less,不是index.css，这个位置很多人忽略。

import 'vant/lib/index.less'
import Vant from 'vant'
Vue.use(Vant)
           

2.修改 .babelrc 文件，增加

"plugins": ["transform-vue-jsx", "transform-runtime"]
           

3.參照Vant的定制主题，复制里面的theme.less文件到Vue项目的本地

4.修改utils.js 文件，替换less,主要是对应theme.less主题文件

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

5.然后修改主题文件里的样式，就能统一修改组件的样式了。