uni-app中如何使用Scss变量 uni-app全局样式文件引入方法-uni-app-PHP中文网

必须通过vite.config.ts配置css.preprocessorOptions.scss.additionalData，值为'@use "@/styles/variables.scss" as *;'，才能让SCSS变量全局生效；@import方式在uni-app中易失效，且不推荐。

uni-app中如何使用scss变量 uni-app全局样式文件引入方法

uni-app 项目里怎么让 Scss 变量全局可用

Scss 变量（比如 $primary-color、$border-radius）在 uni-app 中默认不跨文件生效。直接在某个 .vue 文件的里定义，其他组件完全看不到——这不是 bug，是 Webpack 的模块化行为决定的。

真正起作用的方式只有一种：通过 scss 的 @use 或 @import 显式引入变量文件。uni-app 官方推荐且最稳定的做法是配置 vue.config.js 的 css.preprocessorOptions.scss.additionalData，把变量注入到每个块开头。

必须用 @use + as *（或 @import）才能访问变量，仅 @use "xxx" 不会自动暴露成员
additionalData 是最省心的方案，避免每个文件重复写 @use "@/styles/vars.scss" as *
如果用 HBuilderX 默认创建的项目，它可能没生成 vue.config.js，需要手动创建并确保和 package.json 同级

如何配置 vue.config.js 让 Scss 变量全局注入

在项目根目录新建 vue.config.js，内容如下：

module.exports = {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/vars.scss" as *;`
      }
    }
  }
}

注意路径必须是绝对路径别名（@/），且 vars.scss 文件需真实存在，例如：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

// src/styles/vars.scss
$primary-color: #409eff;
$font-size-base: 14px;
$border-radius-sm: 2px;

additionalData 中的字符串末尾要加分号，否则编译报错：Invalid CSS after "...use "@/styles": expected 1 selector or at-rule, was "as *;"
如果变量文件里用了 @forward 或 @use 引入其他文件，确保路径可解析；HBuilderX 有时对别名解析不一致，可临时改用相对路径测试（如 ../styles/vars.scss）
Vite 模式（uni-app 3.0+）不走 vue.config.js，得改用 vite.config.ts 的 css.preprocessorOptions.scss.additionalData

为什么 @import 在某些场景下会失效

早期很多教程教用 @import "@/styles/vars.scss";，但在 uni-app（尤其搭配 HBuilderX）中容易出问题：

Webpack 的 sass-loader 版本升级后，@import 已被标记为 deprecated，新项目建议统一用 @use
@import 无法做命名空间隔离，多个文件 import 同一个变量文件时，可能触发重复定义警告甚至覆盖
HBuilderX 内置编译器对 @import 的路径解析不如 @use 稳定，尤其含中文路径或空格时容易报 File to import not found
如果变量文件里用了 @use "sass:math" 这类内置模块，@import 无法正确处理命名空间

组件内使用变量时的常见错误

即使全局注入成功，写法不对依然拿不到变量。典型错误包括：

在里直接写 color: $primary-color; —— 这没问题，但前提是 additionalData 已生效；若没生效，控制台会报 SassError: Undefined variable.
误以为 additionalData 能让 JS 也能访问 Scss 变量 —— 它只影响样式块，JS 里要用变量得另配主题配置或 CSS 自定义属性
修改了 vars.scss 但页面没更新颜色 —— 检查是否清除了 HBuilderX 的缓存（菜单栏「运行」→「清除缓存并重新运行」）
在 App.vue 的里写了 lang="scss" 却没加 additionalData 注入，导致 App.vue 里变量不可用（因为 additionalData 对所有生效，但前提是你用了该 lang）