怎么用vue给css中的变量赋值

您需要使用CSS的自定义属性。您可以使用Vue组件的style部分将自定义属性定义为CSS变量，然后在该组件中使用该属性。例如：

<template>
  <div class="container">
    <div class="box" :style="{ '--bg-color': bgColor }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 'red'
    }
  }
}
</script>

<style>
.box {
  background-color: var(--bg-color);
}
</style>

在例子中，我们使用:style绑定了一个对象，对象中定义了一个名为--bg-color的自定义属性，并将它的值设为变量bgColor的值（在本例中为'red'）。在CSS样式中，我们使用var(--bg-color)来引用该自定义属性。这样，当bgColor的值发生改变时，背景颜色也会相应地发生改变。