Ant-design-vue更换主题色

需求

使用ant-design-vue，框架本身使用的蓝色主题色，需要更换成UI指定的颜色。

解决方案

在build文件夹下找到util.js，在util.js文件中找到function generateLoaders，修改return部分

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
          
   
    css: generateLoaders(),
    postcss: generateLoaders(),
   // less: generateLoaders(less),
   less: generateLoaders(less, {
          
   
    modifyVars: {
          
   
    // 这三个地方都设置成你需要的主题色
    primary-color: #d10100,
    link-color: #d10100,
    border-radius-base: 2px,
  },
  javascriptEnabled: true,
  }),
    sass: generateLoaders(sass, {
          
    indentedSyntax: true }),
    scss: generateLoaders(sass),
    stylus: generateLoaders(stylus),
    styl: generateLoaders(stylus)
  }

踩坑注意

此处只提供使用vue-cli构建的项目踩坑提示，如果在main.js中引入的是antd.css，需要注意可能修改了不生效，此时需要将main.js中引入的antd.css修改成antd.less， 并且安装less loader，执行：npm install less less-loader --save-dev即可安装。

其他构建方式如果修改之后不生效请参看官网：