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

基于vue-cli2引入ant-design-vue. vue-cli2构建的项目目录如下：

1.安装ant-design-vue.

npm install ant-design-vue

2. 在src/main.js中引入组件和样式

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import router from './router'
import 'ant-design-vue/dist/antd.less' //注意这里引入的是lessVue.config.productionTip = false;
Vue.use(Antd);/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

3. 安装解析less的依赖包.

npm install less less-loader

4.配置主题颜色. 在build/utils.js中重新配置less

... 
css: generateLoaders(),postcss: generateLoaders(),// less: generateLoaders('less'),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,}),sass: generateLoaders('sass', { indentedSyntax: true }),
...

5.运行项目, 收获你的error...

6.可能我们的error不大一样，但基本都是因为版本问题引起的, 需要重装less或者less-loader.经过测试, 以下版本成功了（仅供参考）.

7.运行效果：