vue3.0 CSS中混入JS变量(css v-bind)：el-dialog中无法使用

问题

在使用element plus中的el-dialog时，尝试使用css v-bind语法，不报错，也不起作用。

解决方案

在网上也没找到解决方案，甚至貌似遇到的人都不多，只好自己尝试了，最终在github的issue上看到一丝丝蛛丝马迹，然后采用在父组件中使用穿透式定义的方式, 关闭append-to-body。

第一步：el-dialog: append-to-body: false

第二步：script:
const color = ref('red');
第三步：scss:

.box {
    &:deep(.zh-modal .body-box .test) {
        color: v-bind(color);
    }
}

总结

若如此的话，不如直接从父组件进行穿透，也就用不到该属性了~

参考地址：
https://github.com/element-plus/element-plus/issues/4037
https://github.com/vuejs/core/issues/4605
https://github.com/vuejs/core/issues/3921