Ant Design Vue V3 Vite全局引入Less CSS变量

vite.config.js 配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
    ],
    css: {
        preprocessorOptions: {
            less: {
                // less文件路径
                additionalData: `@import "src/assets/css/theme.less";`,
            }
        }
    },
})

theme.less

@blue: blue;

vue 文件使用

<template>
    <div class="test"></div>
</template>

<style lang="less" scoped>
.test{
    background-color: @blue;
}
</style>