ant-design-vue自定义主题

首先看官方文档的解释：

Ant Design Vue 定制主题

根据需要，我这里是vue3的版本

1、修改vue.config.js，新加入如下代码块

module.exports = {

    ........
    ........
    ........

    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        'primary-color': '#1DA57A',
                        'link-color': '#1DA57A',
                        'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },

};

2、修改main.js文件，引入

import 'ant-design-vue/dist/antd.less'

3、定制主题用的是less样式文件，需要在vue项目中，引入less的插件

npm install -D less-loader@6.0.0
重点就是这个，要使用6版本的less-loader

我这里的less版本时4.5

npm  i  less

看了很多的教程，配置后发现项目无法编译，因为语法错误

其中语法错误之一：https://blog.csdn.net/qq_43319748/article/details/123166327https://blog.csdn.net/qq_43319748/article/details/123166327

最后尝试6.0.0版本发现编译通过，主题色改变