是否可以在Vue中使用纯CSS变量，而不必链接任何样式表或使用SASS/POSTSS？不确定为什么我无法以最基本的形式实现这一点.
<template>
<div id="test">
TEST
</div>
</template>
<style scoped>
:root {
--var-txt-color: #c1d32f;
}
#test {
color: var(--var-txt-color);
}
</style>
是否可以在Vue中使用纯CSS变量，而不必链接任何样式表或使用SASS/POSTSS？不确定为什么我无法以最基本的形式实现这一点.
<template>
<div id="test">
TEST
</div>
</template>
<style scoped>
:root {
--var-txt-color: #c1d32f;
}
#test {
color: var(--var-txt-color);
}
</style>
由于样式表的属性为scoped，这将无法按预期工作.上述示例编译为:
[data-v-4cc5a608]:root {
--var-txt-color: #f00;
}
而且，正如你们所理解的，它不会针对实际的:root个元素.
可以通过以下方式解决:
此样式表未使用scoped属性.请注意，它可能会导致样式与:root元素的其他变量声明冲突.
将当前组件的包装元素用作根.如果我们这样声明变量:
.test {
--var-txt-color: #c1d32f;
color: var(--var-txt-color);
}
.test-child-node {
background-color: var(--var-txt-color);
}
然后，它可以为同一组件的其他元素重用变量.但是，如果是这样的话，在子组件中使用声明变量而不删除scoped是不可能的.