uni-app怎么使用sass uni-app全局引入scss变量方法【配置】-uni-app-PHP中文网

必须在 vite.config.ts 中配置 css.preprocessorOptions.scss.additionalData，值为 '@use "@/styles/variables.scss" as *;'，确保所有 .vue 文件全局可用 SCSS 变量，避免重复 import 导致样式错乱。

uni-app怎么使用sass uni-app全局引入scss变量方法【配置】

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"` 写在每个里不行？

能编译过，但会触发重复解析：每次 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 和条件编译中是否生效？

生效，但有个隐藏限制：只有里的内容才会被 Vite 的 SCSS 预处理器处理，或内联 style="" 属性完全不识别 SCSS 变量。

App.vue 的可以直接用 $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 和微信开发者工具一起真机预览，两个都显示对了才算过关。