antdv ant-design-vue 自定义主题颜色

方法1：修改配置文件（不推荐）

项目根目录 vue.config.js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
				  javascriptEnabled: true
        }
      }
    },
  },

缺点：

1. 需重启项目才能生效
2. json格式写样式变量反人类
3. 需区分less-loader版本，否则不生效

优点：

1. 能生效，其余没啥优点

方法2：less文件修改（推荐）

删除原来引用的 antdv 主题样式，改成你自己的 less 样式
因为 antdv 是用 less 语法来写的，所以可以写自定义 less 来覆盖

// 删除原antdv引用的主题样式
// import 'ant-design-vue/dist/antd.css';
// import 'ant-design-vue/dist/antd.less';

// 引用自定义样式文件
import './common/theme.less';

新建 ./common/theme.less 文件

// antdv默认样式文件 node_modules/ant-design-vue/lib/style/themes/default.less

// 先引入框架样式less
@import '~ant-design-vue/dist/antd.less';

// 这里自定义样式变量
@primary-color: #f99; // 自定义的主题颜色

修改后即可生效

缺点：

1. 需要学习 less 语法

优点：

1. 不需重启项目，立即生效
2. 用 less 写样式变量符合书写习惯