在vue cli2中通过webpack2.6 自定义配置ant Design vue主题色

一、查看当前 UI库和webPack版本

首先我们安装 ,在项目的根目录下，（如果有就无需安装）

npm install ant-design-vue  组件库

等待安装完成
我们查看根目录下 的package 版本 如图 我的版本为2.61，每个版本的有不同的配置方法其他版本可以看官网
链接: antd UI主题色官网

同时我们启动项目 会发现 需要安装less，因为antd UI 的样式是用less 进配置的

我们需要在项目根目录 重新安装less

npm install less less-loader

在 引入main.js 或者是按需加载registerAntComponent.js引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';  //引入less重写
Vue.use(Antd)

二、设置ant Design vue主题色

以vue cli 2 为例
我们找到 build/utils.js下的 将 less: generateLoaders() 重新更改为主题色

 less: generateLoaders('less', {
      modifyVars: {
        "primary-color": "#a55b9f", // 全局主色
        "link-color": "#f5222d", // 链接色
        "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)" // 浮层阴影
         },
          javascriptEnabled: true,
     }),

三、效果

四、报错解决方案

报错 This dependency was not found: * ~ant-design-vue/dist/antd.less

出现这种情况 无论是哪个版本的 查看 javascriptEnabled:true 有没有打开，vuecli2 位置在 build/utils.js里

	javascriptEnabled: true

报错.bezierEasingMixin();^Inline JavaScript is not enabled. Is it set in your options?

去![在这里插入图片描述](https://img-blog.csdnimg.cn/7d696e3186a24d42873f7813bb213d2a.png
在build 里的utils 配置步骤二

报错 : TypeError: this.getOptions is not a function at Object.lessLoade

这是因为less-loader 版本的问题 推荐是5.0.0

npm install style-loader@5.0.0 --save-dev