ant-design-vue自定义主题

        最近做了个项目，用的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里看一下效果图里的颜色就知道了。

效果如下图所示：

最终效果