vite vue3 中如何在 js 中使用 scss 变量

1pnpm create vite

1cd vitescss
2pnpm install
3pnpm install sass

 1<template>
 2  <div class="demo">
 3    <button
 4      v-for="(item, index) in btns"
 5      :key="index"
 6      @click="onBtnClick(item.bgColor, item.textColor)"
 7    >
 8      {{ item.title }}
 9    </button>
10
11    <div>
12      <div class="example" ref="exampleRef">Hello World</div>
13    </div>
14  </div>
15</template>
16
17<script lang="ts" setup>
18import { ref } from "vue";
19
20const btns = [
21  { title: "红色主题", bgColor: "#FF9191", textColor: "#FF0000" },
22  { title: "蓝色主题", bgColor: "#B3C4FF", textColor: "#042BA9" },
23  { title: "默认主题", bgColor: "#333333", textColor: "#FFFFFF" },
24];
25const currentBgColor = ref("#333333");
26const currentTextColor = ref("#FFFFFF");
27const onBtnClick = (bgColor: string, textColor: string) => {
28  console.log(bgColor, textColor);
29  currentBgColor.value = bgColor;
30  currentTextColor.value = textColor;
31};
32</script>
33
34<style scoped lang="scss">
35.demo {
36  padding: 10px;
37
38  .example {
39    --textColor: v-bind(currentTextColor);
40    --bgColor: v-bind(currentBgColor);
41
42    display: inline-block;
43    margin-top: 20px;
44    font-size: 20px;
45    padding: 20px 50px;
46    color: var(--textColor);
47    background: var(--bgColor);
48  }
49}
50</style>