根本原因是@use默认不注入变量到当前作用域，必须通过命名空间访问（如variables.$primary-color）；常见错误包括漏写$、路径未以下划线开头、@use未置顶、混用@import导致整文件降级为legacy模式。
为什么@use后变量还是报Undefined variable
根本原因是@use默认不把变量注入当前作用域，而是强制走命名空间访问。你写了@use 'variables'，不代表$primary-color就自动可用——它只存在于variables.$primary-color这个路径下。
常见错误现象：
- 编译报错
Undefined variable: "$primary-color"，但文件明明存在且路径正确 - 在 Vue 单文件组件的
<style lang="scss">里写@use '@/styles/_variables'后仍无法用变量 - 用
@use 'variables' as v，却写成v.primary-color（漏掉$）
必须遵守三点：
-
@use必须写在文件最顶部，不能在@media、@mixin或 CSS 规则内部 - 被
@use的文件名必须以下划线开头（如_variables.scss），否则 Sass 拒绝识别为模块 - 路径要写全，
@use 'variables'等价于@use '_variables.scss'，但@use 'variables.scss'会失败
如何让变量在所有 SCSS 文件里直接用（不用加前缀）
唯一可靠方式是用 as * 解构导入，但它不是“全局广播”，而是当前文件作用域内的快捷访问。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 项目规模不大，变量名冲突风险低
- 入口文件（如
main.scss）或构建配置中统一注入 - uni-app 等框架中通过
additionalData配置批量注入
实操建议：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
vue.config.js中配置：css.preprocessorOptions.scss.additionalData: '@use "@/styles/_variables" as *;' - 别写
@use "@/styles/variables" as *;（缺下划线）或@use "@/styles/_variables.scss" as *;（多写扩展名反而可能出错） - 如果同时
@use多个模块，避免都用as *，否则同名变量会覆盖
混用 @import 和 @use 会导致整个文件失效
只要一个文件里出现任意 @import，Sass 编译器就会整份文件降级为 legacy 模式，所有 @use 被忽略，命名空间机制完全不生效。
典型表现：
- 删掉某行
@import 'reset'，variables.$color-text突然就能用了 - 第三方库（如旧版 Bootstrap）仍用
@import，导致你自己的@use模块无法互通 - 构建工具（如 Vite / Webpack）静默失败，不报错但样式丢失
排查要点：
- 全局搜索项目中所有
@import（包括单引号、双引号、路径带不带扩展名） - 检查
node_modules中依赖的 SCSS 库是否已升级到支持@use的版本（如 Bootstrap ≥ 5.3） - 确认
sass --version是 Dart Sass ≥ 1.23.0；LibSass 已彻底不支持@use
想跨文件共享 CSS 自定义属性（供 JS 读取），别依赖 Sass 变量
Sass 变量只在编译期存在，JS 运行时拿不到。若需主题切换、动态色值等能力，必须桥接到 CSS Custom Properties。
正确做法：
- 在
_variables.scss中同时定义两套：$primary-color: #3498db;和:root { --primary-color: #3498db; } - JS 中用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color') - 不要尝试在 SCSS 里写
:export—— 它只对.css文件有效，.scss中会被忽略
关键细节：
-
:root规则只有被实际@use并参与编译的文件才会输出 CSS；某个组件没引入_variables.scss，就不会带上这些--xxx - 不要指望
@forward或@use“传递” CSS 规则副作用——它们只转发声明，不执行渲染
最容易被忽略的是：Sass 模块系统没有“隐式继承”。每个文件都得自己 @use，哪怕父文件已经引入过。这不是冗余，而是模块边界的刚性要求。
