Vue3中能否在Sass模块样式中动态指定类名？

需要从Vue组件脚本向样式模块传递类名，实现包含父组件传入前缀的动态选择器。当前代码及报错如下：

<script lang="ts" setup>
const className = ref('some-class')
</script>

<style lang="sass" module>
.#{v-bind(className)}--dynamic
    pointer-events: none
</style>

报错信息：

Error: expected selector.
.v-bind(className)--dynamic ━ error in interpolated output

问题根源是Sass插值中使用v-bind的语法不符合要求，以下两种方法可解决：

方法1：在Sass插值中用字符串模板拼接 #

将v-bind的返回值与后缀直接拼接成完整选择器字符串，放在Sass插值内：

<script lang="ts" setup>
const className = ref('some-class')
</script>

<style lang="sass" module>
.#{`${v-bind(className)}--dynamic`}
    pointer-events: none
</style>

方法2：脚本内提前拼接完整类名 #

如果逻辑更复杂（比如需要处理父组件传入的前缀），可以在脚本中先计算出完整类名，再传给样式：

<script lang="ts" setup>
// 接收父组件传递的前缀props
const props = defineProps<{ classPrefix: string }>()
// 计算完整动态类名
const fullDynamicClass = computed(() => `${props.classPrefix}--dynamic`)
</script>

<style lang="sass" module>
.#{v-bind(fullDynamicClass)}
    pointer-events: none
</style>

这两种写法都能让Sass正确解析动态选择器，满足多组件引用时带父组件前缀的需求。

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