Ant-Design-Vue定制主题

因为我是基于vue-cli3的框架所以，这个方案只适合vue-cli3。

• 在根目录新建vue.config.js

// vue.config.js for less-loader'6.0.0
module.exports = {
  css:{
    loaderOptions:{
      less:{
        lessOptions:{
          modifyVars:{
            'primary-color': '#1890ff', // 全局主色
            'link-color': '#1890ff', // 链接色
            'success-color': '#52c41a', // 成功色
            'warning-color': '#faad14', // 警告色
            'danger-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',
        },
      },
    },
  },
}

• 下载less less-loader， 因为主题使用的是less全局变量。
  npm install less less-loader --save
• 修改vue.config.js的危险色为#000
  'error-color': '#000', // 错误色
• 测试效果如下

image.png

完成，还有其他的方法，例如自己新增一个less文件，覆盖他全局的less变量。

如果没效果，注意几个地方。

• 引入文件的时候.css后缀改为.less后缀。

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

修改为

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