方法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 写样式变量符合书写习惯
Logo

前往低代码交流专区

更多推荐