wabpack4&vue2&antvue1.7.x 定制主题

首先修改 webpack 中的配置，这里只写了 css 的内容，其他配置自己配。第一次修改建议把颜色改醒目一点的颜色，比如 #f20 红色等。这样更容易看出效果

module.exports = {
 css: {
    requireModuleExtension: true,
    loaderOptions: {
      less: {
        modifyVars: {
          // 定制antVue组件的样式
          'primary-color': '#0067c0',
          'link-color': '#0067c0',
          'border-radius-base': '4px',
          'error-color':'#fc4f54',
          'btn-shadow':'0 3px 3px 0 rgba(0, 103, 192, 0.03)',
          'border-color-base':'hsv(0, 0, 83.9%)',
        },
        javascriptEnabled: true, // 这个必须要， 不然会报错。可以先注释这个看看报错在 开启
      },
    }
}

第二步，修改babel.config.js 文件中的内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
     // 主要是修改  style为 true
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } // 这是修改后的样子
      // { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" } // 这是初始的样子
    ]
  ]
}

然后重新运行项目，重新打开项目网页，就可以看到修改生效了,