“undefined variable”报错主因是@use使用不规范：文件名缺下划线、@use嵌套在块内、多写.scss、分号被ide删除，或与@import混用导致模块系统降级。
报错“Undefined variable”根本不是路径写错
绝大多数人第一反应是检查@use路径是否拼错，但实际更常见的是：变量文件没以下划线开头，或者@use语句被塞进了嵌套块里。Dart Sass 要求模块文件名必须以_开头（如_variables.scss），否则直接拒绝识别为可导入模块；同时@use只能出现在文件最顶部，不能在@media、@mixin或选择器内部——哪怕只缩进一个空格，也会导致整条语句失效，后续变量全报Undefined variable。
-
@use "@/styles/variables.scss"❌（多写了.scss扩展名） -
@use "@/styles/variables"❌（缺下划线，应为_variables） -
.card { @use "@/styles/_vars" as *; }❌（嵌套中不允许@use） -
@use "@/styles/_vars" as *;✅（位置对、命名对、结尾带分号）
additionalData注入后变量仍不可用
Vite 的preprocessorOptions.scss.additionalData只是把字符串插到每个 SCSS 文件顶部，它不改变作用域规则。如果你在additionalData里写@use "@/styles/_vars" as *;，但_vars.scss内部又@use "sass:math"，那as *就无法穿透两层模块，变量依然不可裸用。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 确保
_vars.scss本身不依赖其他@use模块，或改用@import临时兜底（仅限过渡期） - IDE 自动删分号很隐蔽：VS Code 保存时若启用了 Prettier 的 SCSS 格式化，可能把
as *;末尾的分号吃掉，导致注入代码语法非法，Sass 编译器静默跳过整行 - HMR 缓存会导致修改
_vars.scss后，已打开的.vue组件
@import和@use混用会直接让整个文件降级
只要一个 SCSS 文件里出现任意一行@import（哪怕只是引入第三方库的 reset.css），Dart Sass 就强制整份文件退回到 legacy 模式，所有@use声明失效，命名空间机制归零——你写的v.$color会报错，而$color也找不到，因为模块系统被整体绕过了。
- 全局搜索项目中所有
@import，包括node_modules里的依赖（如旧版 Bootstrap 4.x） - 别指望
@use "bootstrap/scss/functions" as bs;能和@import "bootstrap/scss/mixins"共存——它们互相冲突 - 验证方式：删掉某处
@import，如果变量突然可用，就是它在作祟
除法运算符/引发的连锁报错
升级 Dart Sass 后，$size / 2这类写法会触发警告，但更麻烦的是：一旦启用sass-migrator division批量替换，它可能把url(/img/icon.svg)里的/也误改成url(math.div(/img/icon.svg))，直接产出无效 CSS，浏览器解析失败，样式全丢。
- 先加
@use "sass:math";到出问题的文件顶部，再逐个改math.div($a, $b)，别盲目跑迁移脚本 - Vue 单文件组件中
:deep(.foo) { width: $w / 2; }这种写法，需确认$w是否已在该作用域内被@use正确暴露 - 构建产物里搜
math.div和url(相邻的行，快速定位误改点
@use的模块边界意识没建立起来：它不提供“全局变量”，只提供“当前文件作用域内的命名空间快捷访问”。漏掉as *、路径多写扩展名、IDE 删分号、混用@import——这些细节一错，变量就消失，且错误提示几乎不指明根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
