必须用 additionalData，prependData 在 Vite 中无效；正确写法为 css.preprocessorOptions.scss.additionalData: '@use "@/styles/variables.scss" as *;'，确保变量全局可用且避免重复定义导致样式错乱。
uni-app 里 additionalData 和 prependData 到底该用哪个？
Vite 构建的 uni-app（即 uni-app-vite 模板）必须用 css.preprocessorOptions.scss.additionalData，prependData 是 Vue CLI 时代的旧配置，Vite 下完全无效。如果你在 vite.config.ts 里写了 prependData，它会被忽略，变量不会注入。
常见错误现象：
- 改了
variables.scss里的$color-primary，但某些页面没更新 - H5 热更新后样式错乱，小程序里颜色忽明忽暗
- 控制台没报错，但
$xxx变量提示Undefined variable
根本原因是：Vite 的 SCSS 预处理器只认 additionalData，且它会在每个 .vue 的 <style lang="scss"></style> 内容前“插入文本”，不是拼接、不是 import、不触发重复解析。
正确写法（vite.config.ts）：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables.scss" as *;'
}
}
}
as * 是关键——它把所有变量、函数、mixin 直接挂进当前作用域，否则你得写 variables.$color-primary，太冗余。
为什么不能在每个 <style lang="scss"></style> 里写 @import 或 @use？
因为 @import 在 SCSS 里本质是“文本复制粘贴”，不是模块引用。多个组件同时 @import "@/styles/variables.scss"，等于多次定义 $color-primary，SCSS 规则是“后定义覆盖前定义”。而 uni-app 编译顺序不稳定，尤其在条件编译（如 #ifdef MP-WEIXIN）或 HMR 热更时，覆盖顺序随机，导致样式不一致。
典型表现：
- App.vue 里用了
$font-size是 14px，某个 page.vue 却显示成 16px - 微信小程序真机调试时变量值偶尔回退到旧版本
- 修改变量后必须全量重启 dev server 才生效
另外：@use 虽然比 @import 更现代、支持命名空间，但它仍需每个文件显式调用——维护成本高，且 uni-app 的单文件编译流程对跨文件 @use 的依赖分析不如 Webpack 稳定，容易漏注入。
uni.scss 还能用吗？和 additionalData 冲突吗？
能用，但有严格限制：uni.scss 只对 <style></style> 块生效，且仅限于未指定 lang 的情况。一旦你写了 <style lang="scss"></style>，uni-app 就会跳过 uni.scss 注入，转而走 Vite 的 SCSS 预处理器链。
也就是说：
- 如果你用
additionalData配了全局变量，uni.scss里的变量就完全不会生效 - 如果你没配
additionalData，又写了lang="scss"，那uni.scss也失效 - 想让
uni.scss生效，必须删掉所有lang="scss"，全部用默认<style></style>，并确保uni.scss在src/根目录
不推荐依赖 uni.scss：它无法支持 @use、@forward 等现代 SCSS 特性，变量无法被函数或 mixin 消费，也不兼容 HBuilderX 外的 CLI 工作流。
路径别名 @/ 报错 File to import not found 怎么办？
错误通常出现在 additionalData 中路径写成相对路径（比如 ../styles/variables.scss），或误用了 ~@/ 这种 Webpack 风格写法。Vite 的 @/ 别名只在 import 语句中由插件解析，在 additionalData 字符串里只是纯文本，不会自动替换。
必须确保：
-
variables.scss文件真实存在，路径以src/为根，如src/styles/variables.scss -
additionalData中写'@use "@/styles/variables.scss" as *;'—— 引号内是完整字符串，@/会被 Vite 的别名插件识别 - 不要加
~，不要写./或../，Vite 不支持
验证方法：在任意 <style lang="scss"></style> 里手动写一行 @use "@/styles/variables.scss" as *;，如果能编译过，说明路径和别名都没问题；如果报错，优先检查 package.json 里 sass 版本是否 ≥ 1.33.0（低版本不支持 @use 语法）。
最易被忽略的一点：Vite 的 additionalData 注入发生在编译阶段，不是运行时，所以它不感知条件编译块（如 #ifdef MP-ALIPAY）内的样式逻辑——变量是全局注入的，但后续的样式规则仍需按平台分别处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
