唯一稳定方式是配置css.preprocessorOptions.scss.additionalData为'@use "@/styles/variables.scss" as *;'；因@import导致变量覆盖、手动@use依赖分析不可靠，且必须满足路径以@/开头、结尾分号、文件真实存在三要素。
直接在 vite.config.ts 里配 css.preprocessorOptions.scss.additionalData，值为 '@use "@/styles/variables.scss" as *;'，这是 2026 年 Vite 构建的 uni-app 唯一稳定生效的方式。
为什么不能用 @import 或每个文件手动写 @use
看似能编译过，但实际会引发跨端样式不一致：@import 是文本拼接，多个组件同时 import 同一个变量文件 = 多次定义同名变量 = 最后一次定义覆盖前面的；uni-app 编译顺序在条件编译（如 #ifdef MP-WEIXIN）下不稳定，导致某些页面变量突然变成 Undefined variable。@use 单独写在每个 <style lang="scss"> 里虽比 @import 稍好，但 Vite 对跨文件依赖分析在 uni-app 单文件编译链中仍不可靠，热更新或真机调试时容易漏注入。
必须严格满足的 three要素
additionalData 字符串不是随便写的，少一个都会失效：
- 路径必须以
@/开头（指向src/），不能用相对路径（如../styles/variables.scss），否则不同层级 .vue 文件解析失败 - 末尾必须带分号（
;），漏掉会报错：Invalid CSS after "use "@/styles": expected 1 selector or at-rule, was "as *;" -
variables.scss文件必须真实存在，且内容只能是纯变量定义（如$primary-color: #007AFF;），不要在里面再@use或@import其他文件
as * 是关键，不是可选项
不用 as *，变量不会自动挂进当前作用域：
立即学习“前端免费学习笔记（深入）”；
- 只写
@use "@/styles/variables.scss";→ 必须用variables.$primary-color，冗长且易错 - 写
@use "@/styles/variables.scss" as *;→ 可直接用$primary-color，和其他 SCSS 项目习惯一致 - 它同时把
mixin和函数也一并暴露，避免后续还要单独@use引入
vite.config.ts 配置示例与常见陷阱
确保你用的是 Vite 模式（uni-app 3.0+），老项目即使升级了也要删掉 vue.config.js —— 它完全被忽略：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables.scss" as *;'
}
}
}
})容易踩的坑：
- 误把
variables.scss放在static/下：Vite 别名@/不解析static/，路径会 404 - 装了低版本 sass（
<1.33.0）：@use语法不支持，报错Invalid CSS after "@use"，必须升级sass包 - 在
App.vue的<style scoped lang="scss">里定义变量：scoped 会加属性选择器，变量根本不会透出到子组件
真正复杂的地方在于：SCSS 变量是编译期静态值，和运行时可变的 CSS 自定义属性（--color-primary）完全不是一回事。如果你需要主题切换，得用 SCSS 计算 + CSS 变量承载，而不是指望 $color-primary 能被 JS 修改。
