必须通过vite.config.ts配置css.preprocessorOptions.scss.additionalData，值为'@use "@/styles/variables.scss" as *;'，才能让SCSS变量全局生效；@import方式在uni-app中易失效，且不推荐。
uni-app 项目里怎么让 Scss 变量全局可用
Scss 变量（比如 $primary-color、$border-radius）在 uni-app 中默认不跨文件生效。直接在某个 .vue 文件的 <style lang="scss"></style> 里定义，其他组件完全看不到——这不是 bug，是 Webpack 的模块化行为决定的。
真正起作用的方式只有一种：通过 scss 的 @use 或 @import 显式引入变量文件。uni-app 官方推荐且最稳定的做法是配置 vue.config.js 的 css.preprocessorOptions.scss.additionalData，把变量注入到每个 <style lang="scss"></style> 块开头。
- 必须用
@use+as *（或@import）才能访问变量，仅@use "xxx"不会自动暴露成员 -
additionalData是最省心的方案，避免每个文件重复写@use "@/styles/vars.scss" as * - 如果用 HBuilderX 默认创建的项目，它可能没生成
vue.config.js，需要手动创建并确保和package.json同级
如何配置 vue.config.js 让 Scss 变量全局注入
在项目根目录新建 vue.config.js，内容如下：
module.exports = {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/vars.scss" as *;`
}
}
}
}
注意路径必须是绝对路径别名（@/），且 vars.scss 文件需真实存在，例如：
立即学习“前端免费学习笔记（深入）”；
// src/styles/vars.scss $primary-color: #409eff; $font-size-base: 14px; $border-radius-sm: 2px;
-
additionalData中的字符串末尾要加分号，否则编译报错：Invalid CSS after "...use "@/styles": expected 1 selector or at-rule, was "as *;" - 如果变量文件里用了
@forward或@use引入其他文件，确保路径可解析；HBuilderX 有时对别名解析不一致，可临时改用相对路径测试（如../styles/vars.scss） - Vite 模式（uni-app 3.0+）不走
vue.config.js，得改用vite.config.ts的css.preprocessorOptions.scss.additionalData
为什么 @import 在某些场景下会失效
早期很多教程教用 @import "@/styles/vars.scss";，但在 uni-app（尤其搭配 HBuilderX）中容易出问题：
- Webpack 的
sass-loader版本升级后，@import已被标记为 deprecated，新项目建议统一用@use -
@import无法做命名空间隔离，多个文件 import 同一个变量文件时，可能触发重复定义警告甚至覆盖 - HBuilderX 内置编译器对
@import的路径解析不如@use稳定，尤其含中文路径或空格时容易报File to import not found - 如果变量文件里用了
@use "sass:math"这类内置模块，@import无法正确处理命名空间
组件内使用变量时的常见错误
即使全局注入成功，写法不对依然拿不到变量。典型错误包括：
- 在
<style scoped lang="scss"></style>里直接写color: $primary-color;—— 这没问题，但前提是additionalData已生效；若没生效，控制台会报SassError: Undefined variable. - 误以为
additionalData能让 JS 也能访问 Scss 变量 —— 它只影响样式块，JS 里要用变量得另配主题配置或 CSS 自定义属性 - 修改了
vars.scss但页面没更新颜色 —— 检查是否清除了 HBuilderX 的缓存（菜单栏「运行」→「清除缓存并重新运行」） - 在
App.vue的<style></style>里写了lang="scss"却没加additionalData注入，导致 App.vue 里变量不可用（因为additionalData对所有<style lang="scss"></style>生效，但前提是你用了该 lang）
真正麻烦的是多端兼容性：H5 和小程序对 Scss 的支持度基本一致，但 App 端（尤其是 iOS）某些复杂嵌套或函数（如 mix()）可能渲染异常，变量本身倒很安全——所以变量尽量保持简单，计算逻辑放到 JS 或 CSS 变量里更稳妥。
