Vue中使用CSS变量

Question

是否可以在Vue中使用纯CSS变量，而不必链接任何样式表或使用SASS / PostCSS？不确定为什么我无法使它以最基本的形式工作。

<template>
   <div id="test">
        TEST
    </div>
</template> 
<style scoped> 
   :root {
   --var-txt-color: #c1d32f;
   }

 #test {
 color: var(--var-txt-color);
  }
</style> 

Answer 1

由于样式表的scoped属性，因此无法正常工作。上面的示例编译为：

[data-v-4cc5a608]:root {
  --var-txt-color: #f00;
}

Answer 2

[我知道您突出显示了“无需链接任何样式表”，但是我遇到了同样的问题，并且有一个简单的选择-仅使用一个外部CSS文件并将其包含在App.vue中，然后就可以访问变量了其他范围内的样式也一样。

variables.css

Answer 3

为什么不只使用这个？

<style scoped>
  * {
    --var-txt-color: #c1d32f;
  }
</style>