use CSS Variables by vue directive
npm i v-css-var
import cssVar from 'v-css-var'
Vue.use(cssVar)<template>
<div v-css-var="var"></div>
</template>
<script>
export default {
data(){
return {
var:{
a:'1px' // not suggest start with --,like '--a':'1px',but supported
}
}
}
}
</script>
<style>
div{
height: var(--a);
}
</style>It will be transfed as
<div style="--a:'1'"></div>If you want share the vars to all, you can add it to the html element
<template>
<div v-css-var.root="var"></div>
</template>
It will be transfed as
<html style="--a:'1px'">
<body>
<div></div>
</body>
</html>- remove the css Variables
- write the test