最近做了个项目，用的ant-design-vue的组件库，需求方想把整个项目色调从默认的蓝色换成橙色，接着我开始看官方文档以及百度，网上有几种解决方案，但试来试去，还是官方推荐的方式更简单一些。
官方文档链接：https://www.antdv.com/docs/vue/customize-theme-cn/
官方也推荐了好几种定制方式，直接用了第一种：在 webpack 中定制主题。
1、找到webpack.config.js
2、添加如下代码：
{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'less-loader',
options: {
modifyVars: {
//配置通用变量，如需更多：https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
'primary-color': '#fa8c16',
'link-color': '#fa8c16',
'border-radius-base': '2px',
'layout-header-background': '#291500',
'menu-dark-submenu-bg': '#170c00'
},
javascriptEnabled: true,
},
}]
},
具体是哪块的颜色就不注释了，直接在ps里看一下效果图里的颜色就知道了。
效果如下图所示：
