如何在Uni-app多端开发中通过SCSS统一管理全局CSS？-css教程-PHP中文网

唯一稳定方式是配置css.preprocessoroptions.scss.additionaldata为'@use "@/styles/variables.scss" as *;'；因@import导致变量覆盖、手动@use依赖分析不可靠，且必须满足路径以@/开头、结尾分号、文件真实存在三要素。

如何在uni-app多端开发中通过scss统一管理全局css？

直接在 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"></style> 里虽比 @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 *，变量不会自动挂进当前作用域：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

只写 @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（）：<code>@use 语法不支持，报错 Invalid CSS after "@use"，必须升级 sass 包
在 App.vue 的 <style scoped lang="scss"></style> 里定义变量：scoped 会加属性选择器，变量根本不会透出到子组件