尽管在日常开发中，这类情况实际上很少出现。
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代码中使用
<style lang="scss" scoped> .test { /deep/ .el-form-item__label { color: var(--color) !important; } } </style>
vue3(v-bind CSS变量注入):
<template> <span> style v-bind CSS变量注入</span> </template> <script lang="ts" setup> import { ref } from 'vue' const color = ref('green') </script> <style scoped> span { /* 使用v-bind绑定组件中定义的变量 */ color: v-bind('color'); } </style>
