@use后变量找不到的根本原因是作用域未打通而非路径错误，必须通过命名空间（如variables.$primary-color）访问或严格满足前提条件使用as *解构。
@use后变量找不到，几乎总是因为作用域没打通，而不是路径写错了。 Sass 的 @use 默认不把变量塞进当前作用域，必须显式访问命名空间，或用 as * 解构——但后者有严格前提，稍有偏差就静默失效。
为什么 @use 'variables' 后 $primary-color 还是报错
根本不是文件没找到，而是 @use 本身不注入变量。它只创建一个模块命名空间：variables.$primary-color 才合法；直接写 $primary-color 必然报 Undefined variable。
- 漏写
$：写成variables.primary-color（错），必须是variables.$primary-color - 路径没以下划线开头：文件名是
variables.scss，但 Sass 只认_variables.scss为模块 -
@use没放在最顶部：前面哪怕有一个空行、注释或@charset，整行都会被 Sass 忽略 - 混用了
@import：只要文件里存在任意@import（包括第三方库内部的），整个文件立刻降级为 legacy 模式，@use全部失效
as * 为什么配了还是用不了变量
as * 看似“全局”，实则是当前文件作用域内的解构快捷方式，它对源文件有硬性要求：
- 被
@use的文件（如_variables.scss）里不能含任何@import，否则整条链降级，as *形同虚设 -
additionalData字符串末尾必须带分号和换行：'@use "@/styles/_variables" as *;\n'，少;或\n会导致下一行 CSS 被拼进 SCSS 语句，静默失败 -
@/别名只在构建工具配置中生效，additionalData字符串里不会自动解析；若别名未配好，得改用绝对路径：path.resolve(__dirname, 'src/styles/_variables.scss') - IDE（如 VS Code）可能自动删掉
@use行末分号，编译器不报错但跳过整行，极难排查
Vue 单文件组件里 lang="scss" 不生效的隐蔽原因
变量找不到，常因 SCSS 编译器根本没启动：
- 漏写
lang="scss"：写成，Vite 就当纯 CSS 处理，@use原样输出到浏览器，CSS 解析器直接丢弃 -
lang拼错：写成lang="sass"或lang="scss "（末尾空格），同样绕过 SCSS 解析 - 同时用了
scoped和module：，Vite 优先走 CSS Modules 流程，SCSS 变量注入被跳过 - HMR 缓存未刷新：改了
_variables.scss，但已打开的组件没重载块，变量仍是旧值，需手动硬刷一次
真正容易被忽略的是：Sass 模块系统没有“全局变量”概念，@use 的行为是确定性的、不可绕过的。你看到的“失效”，几乎总是某处悄悄退回到了 @import 时代——比如 node_modules 里一个未升级的 Bootstrap，它内部的一行 @import 就足以拖垮整个依赖链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
