必须在 vite.config.ts 中配置 css.preprocessorOptions.scss.additionalData，值为 '@use "@/styles/variables.scss" as *;'，确保所有 .vue 文件全局可用 SCSS 变量，避免重复 import 导致样式错乱。
uni-app 项目里怎么让所有 .vue 文件都能直接用 SCSS 变量？
必须通过 vite.config.ts（或 vite.config.js）配置 css.preprocessorOptions.scss.additionalData，而不是靠 @import 或 style-resources-loader —— 后者在 uni-app（尤其是 H5 和小程序端）根本不起作用。
原因很简单：uni-app 的 Vue 单文件编译流程绕过了 Webpack loader 链，Vite 的预处理器注入才是唯一稳定入口。不配这里，@use 或 @import 每个文件都写一遍，维护成本爆炸。
- 推荐统一变量文件路径为
src/styles/variables.scss，内容只放$color-primary: #409eff;这类定义，不带逻辑、不带@import - 在
vite.config.ts中添加：css: { preprocessorOptions: { scss: { additionalData: '@use "@/styles/variables.scss" as *;' } } } -
as *是关键：它把变量、函数、mixin 全部挂到全局命名空间，否则要用variables.$color-primary，太啰嗦 - 注意路径别写错：
@/是 Vite 别名，指向src/；如果用相对路径（如../styles/variables.scss），在不同层级的 .vue 里会失效
为什么 @import "@/styles/variables.scss" 写在每个 <style lang="scss"></style> 里不行？
能编译过，但会触发重复解析：每次 import 都会让 Vite 重新读取、解析、合并变量，不仅慢，还会在 H5 热更新时导致样式错乱，小程序端更可能因变量覆盖顺序问题出现颜色/尺寸不一致。
典型现象是：改了一个变量值，有些组件生效，有些没变；或者 H5 切换页面后主题色突然回退。
立即学习“前端免费学习笔记（深入）”；
- SCSS 的
@import不是“引用”，而是“文本拼接”，多个文件 import 同一个变量文件 = 多次定义同名变量 = 最后一次定义胜出 - uni-app 的
vue-style-loader对重复 import 的处理不如 Webpack 稳定，尤其在条件编译（如#ifdef MP-WEIXIN）场景下极易失控 - 真正需要按需引入的是 mixin 或 function（比如
@use "@/styles/mixins.scss" with ($breakpoints: ...)），变量一律走additionalData
使用 @use 而不是 @import 时要注意什么？
@use 是 SCSS 4.0+ 推荐语法，但 uni-app 默认支持取决于你装的 sass 版本 —— 必须是 sass@^1.33.0 或更高，低版本会报 Invalid CSS after "@use": expected "{", was "@/styles/variables.scss"。
- 检查
package.json中sass版本，运行npm ls sass确认是否 ≥1.33.0 - 如果用
@use+as *，就别再写@import，两者混用会导致变量被多次注入，Vite 不报错但行为不可预测 - 想给变量加命名空间（比如避免
$primary冲突），可以不用as *，改用@use "@/styles/variables.scss" as vars;，然后写color: vars.$primary; - 小程序平台对
@use的兼容性没问题，但旧版微信开发者工具（
全局变量在 App.vue 和条件编译中是否生效？
生效，但有个隐藏限制：只有 <style lang="scss"></style> 里的内容才会被 Vite 的 SCSS 预处理器处理，<style lang="css"></style> 或内联 属性完全不识别 SCSS 变量。
-
App.vue的<style lang="scss"></style>可以直接用$color-primary，无需额外 import - 在
#ifdef MP-WEIXIN块里写的样式，只要外层是lang="scss"，变量照常可用 - 但如果你在 JS 里动态拼 CSS 字符串（比如
view.style = `color: ${colorPrimary}`），变量不会自动注入 —— 这属于运行时逻辑，和编译期 SCSS 无关 - 真要 JS 读变量，得单独导出 JS 版本（如
src/styles/variables.ts），和 SCSS 文件内容保持同步，不能靠自动化生成
as *、路径写错、或 sass 版本卡在 1.32，就会变成“明明写了却用不了”的玄学问题。最稳的做法：配完立刻在 pages/index/index.vue 里写一行 color: $color-primary;，连 H5 和微信开发者工具一起真机预览，两个都显示对了才算过关。 
