CSS variables use in Vue

Question

Is it possible to use pure CSS variables with Vue without having to link any stylesheets or use SASS/PostCSS? Unsure why I'm unable to get this to work in its most basic form.

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

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

Answer 1

This won't work as expected because of scoped attribute for stylesheet. Example above compiles into:

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

And, as you understand, it will not target actual :root element.

It can be solved by:

• Not using scoped attribute for this stylesheet. Notice that it may cause styles conflict with other variables declarations for :root element.

• Using current component's wrapping element as root. If we declare variables this way:

  .test {
    --var-txt-color: #c1d32f;
    color: var(--var-txt-color);
  }
  
  .test-child-node {
    background-color: var(--var-txt-color);
  }
  

Then it will can reuse variables for other elements of the same component. But still, it won't be possible to use declared variables inside child components without removing scoped, if it is the case.