ant-design更换主题颜色

转载：https://blog.csdn.net/zhangyuxuan2/article/details/88868822

需求

使用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即可安装。

其他构建方式如果修改之后不生效请参看官网：
ant-design-vue配置主题色不生效