Ändern Sie die Farbe des Ant-Design-Vue-Menüs, ohne den Stil zu überschreiben
1. Konfigurieren Sie den folgenden Code in vue.config.js
Wenn Sie weniger verwenden, müssen Sie (less, less-loader) installieren.
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. Wenn Sie andere Parameter konfigurieren möchten, können Sie den folgenden Link aufrufen oder den Link zu Ihrer lokalen Datei node_modules/ant-design-vue/lib/style/themes/default.less aufrufen: Weitere Konfigurationsparameter für Stilvariablen
https :
// github.com/ vueComponent/ant-design-vue/blob/main/components/style/themes/default.less 3. Link zur
offiziellen Referenzadresse : offizielle Referenzadresse des benutzerdefinierten Themas https://antdv.com/docs/vue/ „customize-theme-cn“ /
