如何在Vue中通过JavaScript将SCSS变量动态设置为CSS变量

你写的代码不生效的核心原因是：#{}是SCSS的编译期插值语法，仅在SCSS编译为CSS的阶段生效。你把它写在Vue的运行时代码中时，SCSS已经完成编译，浏览器根本无法识别该语法，自然不会生效。

以下是两种常用场景的正确实现方式：

场景1：直接通过props动态绑定CSS变量（最常用） #

不需要额外处理SCSS，直接在Vue的模板元素上通过style绑定动态注入CSS变量即可，后续在<style>里直接调用该CSS变量：

<template>
  <!-- 给需要生效的容器绑定style，直接传入props的值即可，不需要加任何插值语法 -->
  <div :style="{ '--backgroundColor': backgroundColor }" class="content-box">
    测试内容
  </div>
</template>

<script setup>
// 定义props接收外部传入的颜色值
const props = defineProps({
  backgroundColor: {
    type: String,
    default: '#ffffff'
  }
})
</script>

<style lang="scss">
.content-box {
  /* 直接使用已绑定的CSS变量即可 */
  background-color: var(--backgroundColor);
}
</style>

场景2：需要把动态值同步给现有SCSS变量使用 #

如果你的项目中已经有统一维护的SCSS变量，需要用动态传入的值覆盖SCSS变量的默认值，只要把SCSS变量的取值指向对应的CSS变量即可：

// SCSS变量定义文件
$primary-bg: var(--backgroundColor, #f5f5f5); // 第二个参数为默认兜底值，没有传入CSS变量时生效

// 业务代码中直接使用SCSS变量即可，会自动读取动态传入的值
.content-box {
  background-color: $primary-bg;
}

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