vue3：CSS 样式中引用 JavaScript 变量

在 SFC style CSS variable injection (new edition) #231 中尤大给出了 在 style 标签中引用 js/ts 变量 的解决方案：在 style 标签中使用v-bind()工具绑定 script 中的 js 变量

<script>
export default {
    data() {
        return {
            color: 'red'
            text: {
                size: '20px'
            }
        }
    }
}
</script>

<style>
    .text {
        color: v-bind(color);
        font-size: v-bind('text.size');
    }
</style>

该语法同样适用于：

• <style scoped>
• <style lang="scss" scoped>
• <script setup lang="ts">