Modify ant-design-vue menu color without style override

Modify ant-design-vue menu color without style override

1. Configure the following code in vue.config.js
Using less, you need to install (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. If you want to configure other parameters, you can visit the link below, or visit your local node_modules/ant-design-vue/lib/style/themes/default.less file link
: More style variable configuration parameters
https://github.com/ vueComponent/ant-design-vue/blob/main/components/style/themes/default.less
3. Official reference address
link: official reference address of customized theme
https://antdv.com/docs/vue/customize-theme-cn /