Vue scss中使用js数据

Vue2

<template>
	<p class="test" :style="temp">test  ttttttttttttttt</p>
</template>

<script>
export default {
	data() {
    	return {
    		temp: '--bgc: yellow;'
    	}
    }
}
</script>

<style lang="scss" scoped>
	.test {
    	color: red;
    	background-color: var(--bgc);
  	}
</style>

Vue3

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>