vue项目中在scss代码中使用data中的变量

尽管在日常开发中，这类情况实际上很少出现。

VUE2:

在HTML中使用时，请确保将cssVars绑定在需要使用CSS变量的元素或该元素的上层元素上。

<template>
  <div :style="cssVars">
    <div class="test"/>div>
  div>
template>

在data或者compute中给出前缀为--的css变量对象

computed: {
  cssVars() {
    return {
      '--color1': 'red',
      '--color2': 'blue'
    };
  }
}

在css代码中使用

vue3(v-bind CSS变量注入):