vuecli3 版本vant主题样式

1、给项目配置主题颜色

2、覆盖vant本身的主题

这里用到的var.less默认是vant的主题颜色，根据需要修改

const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // less 文件覆盖（文件路径为绝对路径）
          // 这里千万要写对，不然就会报错，或者直接没有效果，也找不到原因
          hack: `true; @import "${path.resolve(__dirname, 'src/assets/less/var.less')}";`
        }
      }
    }
  }
}

function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/assets/less/var.less'), // 需要全局导入的less
      ],
    })
}

还有很关键的一步

在babel.config.js里面，把style: true删掉

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: true
    }, 'vant']
  ]
}