SCSS变量跨文件引用技巧

本文深入解析了SCSS中变量跨文件读取的核心难题与实战解决方案，直击@use模块系统下变量不可见、Undefined variable报错、命名空间访问混乱等高频痛点，系统梳理了路径命名规范（必须以下划线开头）、声明位置约束（必须置于文件顶部）、as *解构的适用边界及潜在覆盖风险，并特别警示混用@import将导致整文件降级为legacy模式的“静默失效”陷阱；同时指出Sass变量无法被JS运行时获取的本质限制，强调需通过CSS自定义属性（:root { --var: value }）桥接样式与逻辑，真正实现主题动态化与跨技术栈协同——这不仅是一份避坑指南，更是现代SCSS工程化落地的关键认知升级。

为什么@use后变量还是报Undefined variable

根本原因是@use默认不把变量注入当前作用域，而是强制走命名空间访问。你写了@use 'variables'，不代表$primary-color就自动可用——它只存在于variables.$primary-color这个路径下。

常见错误现象：

• 编译报错 Undefined variable: "$primary-color"，但文件明明存在且路径正确
• 在 Vue 单文件组件的