vue3 + Less + ant design vue 使用antd的 CSS 变量

版本信息

"vue": "^3.2.0",
"ant-design-vue": "^2.2.8",

//
"less": "^3.13.1",
"less-loader": "^6.0.0",

main.js

import { createApp } from 'vue'
...

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

...

vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 引入 ant design vue 的默认主题色
            hack: 'true; @import (reference) "ant-design-vue/lib/style/themes/default.less";',
            
            // 下面可以覆盖 ant design vue 的主题色，比如：
            // primary-color: #1890ff;
          },
          javascriptEnabled: true,
        },
      },
    },
  },
}

组件内使用ant design vue 的 CSS 变量 test.vue

<script setup lang="ts">

</script>

<template>
  <div class="container">
    测试
  </div>
</template>

<style lang="less" scoped>
.container {
    color: @error-color
}
</style>