必须通过命名空间访问变量，如variables.$primary-color；加as *可直接使用$primary-color；路径须为_variables.scss或显式扩展名；混用@import会触发legacy模式致@use失效；JS需用#{$var}插值导出CSS变量。

Sass 变量在不同文件间“无法传递”，根本不是变量丢了，而是你还在用旧思维理解模块系统——@use 不是 @import 的同义替换，它默认不把变量塞进当前作用域。

---

@use 导入后变量报 Undefined variable 怎么办

• Sass 把每个 @use 文件当作独立模块，变量必须带命名空间访问：
  @use 'variables'; → 必须写 variables.$primary-color，直接写 $primary-color 就会报错
• 想省前缀？加 as ：
  @use 'variables' as ; → 后续可直接用 $primary-color
• 别名不能漏掉 $：写成 v.primary-color 是错的，得是 v.$primary-color
• 路径必须以 _ 开头或显式带扩展名：@use '_variables' ✅，@use 'variables' ❌（即使文件存在，也不识别）

---

Vite / uni-app 项目中如何让所有 .vue 文件都能直接用变量

• 所有变量注入必须走 css.preprocessorOptions.scss.additionalData 配置，别在每个 里重复写 @use
• 正确配置（vite.config.ts）：

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variables.scss" as *;'
      }
    }
  }

• 注意三点：
  • 字符串末尾必须加分号，否则编译直接失败
  • @/ 是 Vite 别名，指向 src/；写相对路径（如 ../styles/variables.scss）在不同层级组件里会失效
  • variables.scss 文件本身不能含 @import，否则整条链降级为 legacy 模式，@use 失效

---

为什么混用 @use 和 @import 会导致变量突然消失

• Sass 编译器只要检测到任一 @import（哪怕在被引入的第三方文件里），整个文件立即退化为旧模式（legacy mode）
• 在 legacy 模式下：@use 被忽略、命名空间失效、变量变成扁平拼接、!default 行为异常
• 常见陷阱：
  • main.scss 里写了 @use 'vars';，但顺手加了一行 @import 'reset.css'; → 全部变量不可用
  • 引入了未升级的 Bootstrap（@import → 你的 @use 模块全挂
• 解法：全局搜索项目中所有 @import（包括 node_modules 中的第三方库），删干净再验证

---

真正容易被忽略的点是：SCSS 变量只存在于编译期，它不会自动变成 CSS 自定义属性。如果你需要 JS 动态读写，比如主题切换，必须手动在 :root 里用插值写 --primary-color: #{$primary-color};，否则 JS 拿不到。

FD Studio

一款AI视频创作工具，主要用于一站式AI辅助影视创意工作台，适合需要提升相关任务效率的用户。

下载