vue-在scss中使用data的变量

需要把el-progress的文字跟随主题色，直接写行内样式不生效，以下解决

<template>
  <div class="TimeCountDown">
    <el-progress
      class="progress"
      type="circle"
      :format="format"
      :percentage="percentage"
      :color="themeColor"
      :style="cssVars"
    ></el-progress>
  </div>
</template>

计算属性里定义

computed: {
    ...mapGetters(["language", "themeColor"]), // 主题色存在vuex里了
    cssVars() {
      return {
        "--color": this.themeColor || red,
      };
    },
  },

css里

<style lang="scss">
.progress {
  .el-progress__text {
    color: var(--color); // 解决
  }
}
</style>