vue-cli2定制ant-design-vue主题

本篇是vue-cli2定制主题，vue-cli3通过vue.config.js定制主题点击此处
1.引入less和less-loader（如果报错，请将less-loader版本更改到5.0.0）

npm install less less-loader --save

2.在 vue cli 2 中定制主题，修改build/utils.js文件

less: generateLoaders("less", {
      modifyVars: {
        "primary-color": "#1DA57A", // 全局主色
        "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
    }),

3.注意样式必须加载 less 格式

• 如果你在使用 babel-plugin-import 的 style 配置来引入样式，需要将配置值从 ‘css’ 改为 true，这样会引入 less 文件。
• 如果你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的，改为 ant-design-vue/dist/antd.less。

4.重启项目即可（每次设置主题色后需要重新才可以看到效果）