ant-design-vue自定义主题的less版本设置

ant-design-vue版本要大于1.5.0

"ant-design-vue":"^1.5.3"

vue-cli2.0的less版本设置

    "less": "^2.7.3",
    "less-loader": "^4.1.0",

vue-cli3.0的less版本设置

    "less": "^3.11.1",
    "less-loader": "^5.0.0",

 assets文件夹下新增base.less以及your-theme-file.less  

下面是base.less的内容  修改的less写在  your-theme-file.less 中 

例如

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

main.js中引入base.less

import './assets/base.less'

注意 这种方式更改主题 需要引入less 而不是 css

// import 'ant-design-vue/dist/antd.css'
import 'ant-design-vue/dist/antd.less'

 如果使用未生效建议在webpack中设置（详情见ant-design-vue官网的定制主题部分介绍） 或者如下检查下你的写法

正确写法
@menu-bg:pink;  
错误写法
@menu-bg:"pink";

ant-design-vue → 传送门