antd-vue - - - - - ui框架修改主题色

1. 安装插件

yarn install less-loader less

这是我安装的版本

2. 修改babel.config.js

module.exports = {
    
    
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
    
    
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: "css", // style: true 时加载的是less文件
      },
    ],
  ],
};

3. 修改vue.config.js配置

module.exports = {
    
    
  css: {
    
    
    // css预设器配置项
    loaderOptions: {
    
    
      less: {
    
    
        modifyVars: {
    
    
          // less vars，customize ant design theme
          "primary-color": "#6F4FF2",
          "link-color": "#6F4FF2",
        },
        javascriptEnabled: true,
        // prependData: `@import "@src/...`, // 引用自定义的主色
      },
    },
  },
  devServer: {
    
    
    open: true,
    port: 8080,
    host: "0.0.0.0",
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
    
     },
  },
};

4. main.样式

引入样式

import "ant-design-vue/dist/antd.less";

参考文献 ：
【动态更换ant-design-vue主题颜色】