ant-design-vue 如何使用内置的变量样式

1、在自定义的style.less里面引入

@import '~ant-design-vue/lib/style/index.less';

在shyle.less里面就可以直接用内置变量样式了

 这种方法只能在自定义的style.less里面用内置样式，无法全局使用内置样式

2、如何全局引用内置样式文件呢？

1、首先要npm install style-resources-loader (首先要确保安装了less(less版本在3.0以上)，和less-loader)

npm install  vue-cli-plugin-style-resources-loader

2、其次在vue.confige.js中加入 

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/theme.less')], // 引入自定义全局样式，（在自定义样式中引入了ant-design-vue的内置变量样式文件；这样在页面中也能引用变量文件了）
    },
  },

3、在main.js中在import 'ant-design-vue/dist/antd.less'的下面

引入  import '@/assets/theme.less'  //自定义样式 

这样在任何组件内都可以使用内置变量样式了，不用引入任何文件了