Ant Design of Vue 定制主题

背景

  • ant design of vue
  • 在 vue cli 3中定制主题

文件目录

Ant Design of Vue 定制主题_第1张图片

文件antd-variable.less

/*
Write your variables here. All available variables can be
found in https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less.
*/

@import '~ant-design-vue/dist/antd.less';

// Here are the variables to cover, such as:
@primary-color: #30A679;

文件ant-design-vue.js

import Vue from 'vue'
import Antd from 'ant-design-vue'
import '../antd-variables.less'
Vue.use(Antd)

在main.js中引入

import './plugins/ant-design-vue.js'

文件vue.config.js

module.exports = {
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}
  • 若少了此配置会报错:
    Inline JavaScript is not enabled. Is it set in your options?
    Ant Design of Vue 定制主题_第2张图片

你可能感兴趣的:(Vue.js)