vue3中css使用script中定义的变量

代码

<template>
  <div class="box">haha</div>
</template>

<script setup lang="ts">
const boxWidth = '500px'
</script>

<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果