vue项目中如何在css中使用data中定义的变量

1. 在data中定义好变量

export default {
  data() {
    return {
      bgColor: '#f66'
    }
  }
}

2. 在html中 在父级定义变量 并与data中定义的变量对应

<template>
  <div class="box" :style="{ '--bgColor': bgColor }">
    <!-- 这里是内容 -->
    <!-- 这里是内容 -->
    <!-- 这里是内容 -->
  </div
 </template>

3. 在style中使用该变量

注意：必须要用 var(xxx)

// 这里可以配合scss中的变量（`$bgColor`）来使用。也可以直接使用（`var(--bgColor)`）；如下：
<style lang="scss" scoped>
$bgColor: var(--bgColor);

.box {
  width: 200px;
  height: 200px;
  background: $bgColor;
  // background: var(--bgColor);
}

</style>