ant-design-vue配置主题色

544 阅读1分钟

1.vue.config.js中配置css项,modifyVars对应的自定义主题

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars:{
          'primary-color': '#8fc31f',
          'table-padding-vertical': '8px',
          'table-padding-horizontal': '8px',
          'table-header-bg': '#ebebeb',
          'border-radius-base': '2px',
          'table-header-color': '#515a6e'
        },
        javascriptEnabled: true
      }
    }
  }
}  

2.配置babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

3.main.js里需要导入,Antd导入一定要是/es结尾的,不然会报错

import Antd from "ant-design-vue/es"
import 'ant-design-vue/dist/antd.less'