不使用样式覆盖修改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文件
链接: 更多样式变量配置参数
/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less
3、官方参考地址
链接: 定制主题官方参考地址
/docs/vue/customize-theme-cn/