Vue3(Vite)中如何将变量传入CSS样式类名？

已知在Less中可以用变量作为类名，但在Vue3 + Vite项目里，如何把Vue组件内的动态变量（比如通过getCurrentInstance().type.__scopeId获取的组件唯一scopeId）传入Less，作为自定义类名来编写样式？

我有一个在表格列中使用的Popover组件，需要给它绑定一个动态生成的唯一类名，再针对这个类名写样式。这个类名在Vite构建前无法确定，没法直接写在<style>标签里。

尝试过的方法及问题 #

1. 使用dataset属性绑定

通过v-bind:[uuid]把变量作为HTML dataset属性绑定：

<template>
<el-table :[uuid]="''">
</el-table>
</template>

<script setup>
const uuid = 'data-123'
</script>

<style scoped>
.el-table:deep {
  background-color: red !important;
}
</style>

Vite会编译为：

<div class="el-table" data-123></div>

<style>
.el-table[data-v-123]{ 
  background-color: red !important;
}
</style>

但这个方法对ElTooltip无效：

• Tooltip组件挂载到body上，scoped样式无法穿透到body上的元素
• Element Plus会过滤掉自定义dataset属性，导致样式无法匹配

2. 使用CSS Modules

用CSS Modules生成唯一类名：

<template>
<el-tooltip :popper-class="$styles.tooltip">
  <div class="text-wrapper">
    <span class="text-inner"></span>
  </div>
</el-tooltip>
</template>

<style module>
.tooltip{
  background-color: red !important;
  .text-wrapper {
    border: 1px solid yellow;
    .text-inner {
      font-size: 24px;
    }
  }
}
</style>

编译后所有子元素类名都会被加上哈希：

<div class="_tooltip_1ok_2">
  <div class="_text-wrapper_mono1">
    <span class="_text-inner_mmxr"></span>
  </div>
</div>

<style>
._tooltip_1ok_2{
  background-color: red !important;
}
._tooltip_1ok_2 ._text-wrapper_mono1 {
  border: 1px solid yellow;
}
._tooltip_1ok_2 ._text-wrapper_mono1 ._text-inner_mmxr {
  font-size: 24px;
}
</style>

这不符合需求——我只需要给Tooltip绑定唯一类名，子元素的类名要保持原样。虽然可以用:global()包裹子元素类名来避免哈希，但每个子元素都要加，操作太繁琐。

核心问题 #

如何在Vue3（Vite）中，把组件内的动态变量（比如uuid/scopeId）传入Less，直接作为类名定义样式？比如实现类似下面的效果：

<script setup>
const uuid = 'data-v-123'
</script>

<style lang="less">
// 把uuid传入Less变量
@dynamicVar: /* uuid的值 */;

.@{dynamicVar} {
  color: red;
}

// 或者直接用Vue变量作为类名
.[dynamicVar] {
  color: red;
}
</style>

内容的提问来源于stack exchange，提问作者Golden