不使用样式覆盖修改ant-design-vue菜单颜色

奋斗喵

已于 2023-02-23 10:25:58 修改

阅读量1.6k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-02-23 10:16:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41329287/article/details/129175729

版权

通过在vue.config.js中配置lessloader选项，可以修改ant-design-vue组件的默认颜色，如布局头部背景、菜单文字大小和颜色等，而无需直接覆盖样式。参考default.less文件或官方文档可找到更多样式变量进行定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不使用样式覆盖修改ant-design-vue菜单颜色

1、在vue.config.js中配置以下代码
使用的是less，需要安装(less,less-loader)

module.exports = {
	... ...
	css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'layout-header-background': '#007ACC', // 顶部颜色
          'menu-item-font-size': '15px', // 菜单文字大小
          'menu-icon-size': '15px', // 菜单图标大小
          'menu-dark-submenu-bg': '#005f9f', // 暗色系菜单背景
          'menu-dark-color': '#fff', // 暗色系菜单文字颜色
          'menu-dark-arrow-color': '#fff', // 暗色系右边箭头图标
        },
        javascriptEnabled: true
      }
    }
  },

2、想配置其他参数可以访问下面连接，或者访问你本地的node_modules/ant-design-vue/lib/style/themes/default.less文件
链接: 更多样式变量配置参数
https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less
3、官方参考地址
链接: 定制主题官方参考地址
https://antdv.com/docs/vue/customize-theme-cn/
在这里插入图片描述