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>