如何在Ant Design Vue中使用less.modifyVars()方法动态更改主题色？实现后发现修改无效，该如何解决？

Ant Design Vue官方提供了一个customizeTheme插件，可以帮助我们快速地修改主题色。具体步骤如下：

1. 安装less-loader和less：

npm install less-loader less --save-dev

2. 创建一个less文件，例如theme.less，并在其中定义主题色变量：

@primary-color: #1890ff;

3. 在入口文件main.js中引入customizeTheme，并配置主题色：

import Vue from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import customizeTheme from 'customize-cra-theme';
import themeLess from './theme.less';

Vue.use(Antd);

customizeTheme(themeLess, {
  antDir: path.join(__dirname, './node_modules/ant-design-vue'),
});

new Vue({
  el: '#app',
  render: h => h(App),
});

4. 在需要更改主题色的组件中引入less，使用modifyVars方法进行修改：

注意事项：

1. 需要在mounted钩子函数中执行modifyVars方法，保证less编译完成后再执行修改操作；
2. 修改后的主题色会应用到全局，但仅在渲染时生效，若需要持久化保存，需使用localStorage等工具；
3. 核心原理是通过less.modifyVars方法修改less变量，然后重新编译less文件，生成新的css文件，由webpack进行打包。因此，若正在使用cli工具，也可以修改webpack配置文件，实现同样的功能。