本篇是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.重启项目即可（每次设置主题色后需要重新才可以看到效果）
