可以参考 https://blog.csdn.net/qq_43371595/article/details/132584530

在uni-app中使用Vue 3并结合SCSS时，你可以通过定义全局的SCSS变量文件，然后在组件中引入这些变量，以便在整个项目中复用样式变量。下面是一个详细的步骤和代码示例，展示如何在uni-app的Vue 3项目中配置和使用uni.scss变量。

步骤一：创建全局SCSS变量文件

首先，在你的项目根目录或styles目录下创建一个SCSS变量文件，例如variables.scss。

// variables.scss
$primary-color: #1989fa;
$secondary-color: #e6f7ff;
$font-stack: Helvetica, sans-serif;
$base-font-size: 16px;

步骤二：配置uni-app以支持全局SCSS变量

在uni-app中，你可以通过修改vue.config.js文件（如果存在，或创建它）来配置Webpack，使其支持全局SCSS变量。然而，uni-app官方推荐使用uni.scss文件（位于项目的根目录）来定义全局样式变量。

如果你已经有uni.scss文件，可以直接在其中引入variables.scss：

// uni.scss
@import "./styles/variables.scss"; // 根据你的实际路径调整

如果uni.scss文件不存在，你可以创建它并添加上述内容。

步骤三：在组件中使用SCSS变量

现在，你可以在任何Vue组件的<style>标签中使用这些全局SCSS变量。确保<style>标签添加了lang="scss"属性。

<template>
  <view class="container">
    <text class="title">Hello, uni-app with SCSS!</text>
  </view>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
.container {
  background-color: $secondary-color;
  font-family: $font-stack;
  padding: 20px;
}

.title {
  color: $primary-color;
  font-size: $base-font-size * 1.5;
}
</style>

总结

通过上述步骤，你已经成功在uni-app的Vue 3项目中配置了全局SCSS变量，并在组件中使用了这些变量。这不仅提高了代码的可维护性，还促进了样式的复用和一致性。记得根据项目实际情况调整文件路径和变量定义。