vue3 scss使用js变量

在Vue3中，利用SCSS（Sassy CSS）和JavaScript变量结合可以让你更方便地管理样式，提高代码的复用性和可维护性。在Vue项目中，通常的做法是：

1. **定义全局变量**：在项目的`main.js`或`.vue`文件中，你可以创建一个全局的CSS变量对象，并通过`process.env`从JS环境中获取值，如：

const app = createApp(App)
app.config.globalProperties.$variables = {
  colorPrimary: process.env.VUE_APP_COLOR_PRIMARY,
  fontSize: parseInt(process.env.VUE_APP_FONT_SIZE),
};

2. **使用变量**：然后在SCSS文件中，可以直接引用这些变量，就像它们是预定义的一样：

$color-primary: $variables.colorPrimary;
$font-size: $variables.fontSize;

button {
  color: $color-primary;
  font-size: $font-size rem;
}

3. **动态更新变量**：如果需要根据组件状态改变变量，可以在组件内部修改这个全局变量对象，然后再应用到样式上。