@use规则根本没执行，是因为Dart Sass要求其必须是文件中第一个非空、非注释语句，前面有空行/BOM/注释或CSS规则、缩进、@import残留、被引入文件名不以下划线开头、路径带扩展名或缺少下划线，均会导致@use静默失效且无报错。
@use规则根本没执行，不是路径写错
你看到的“CSS为空”或“变量未定义”，大概率不是路径错了，而是@use压根没被 Sass 解析器执行。Dart Sass 要求它必须是文件中第一个非空、非注释的语句——前面哪怕多一个空行、BOM 字符、或一行// 注释，都会让整条@use静默失效，不报错、不警告、不加载模块。
常见触发点：
-
@use前有 CSS 规则（比如body { }）、@mixin、@if，甚至缩进了一个空格也不行 - 文件开头存在不可见字符（尤其从文档/Chat UI 复制代码时容易带入）
- 用了
@import残留：只要文件里任意位置出现一次@import，整个文件立刻降级为 legacy 模式，@use直接被忽略
被引入的文件名不符合 Sass 模块识别规则
Sass 只把以下划线开头的文件（如_variables.scss）当作“模块”处理。@use "variables"不会去找variables.scss，也不会去找variables.css，它只认_variables.scss。
路径写法必须严格：
- ✅
@use "@/styles/_variables"（不带扩展名，带下划线） - ❌
@use "@/styles/variables.scss"（多写了.scss） - ❌
@use "@/styles/variables"（缺下划线，Sass 当普通字符串处理） - ❌
@use "@/styles/_variables.css"（CSS 文件不支持@use）
Vue 单文件组件里写<style lang="scss"></style>时，同样适用这套规则——@use必须在<style></style>块最顶部，且被引入文件名得是_xxx.scss。
Vite 或 Webpack 中 global 注入失效
很多人想用vite.config.ts里的css.preprocessorOptions.sass.additionalData统一注入变量，结果还是报Undefined variable。问题往往出在：
- 字符串末尾漏了分号：
@use "@/styles/_vars" as *❌，必须写成@use "@/styles/_vars" as *;✅ - 混用了
@import和@use：哪怕additionalData里只写@use，但被引入的_vars.scss内部又含@import，整个链路就崩了 -
_vars.scss里写了实际 CSS 规则（比如body { color: red; }），它会被重复注入到每个组件，且破坏模块隔离 - 别名配置顺序错位：Vite 的
resolve.alias必须在css.preprocessorOptions之前生效，否则@/路径解析失败
第三方库仍用@import，导致你的@use被拖垮
你自己的代码全用@use也没用——只要依赖的某个第三方库（比如 Bootstrap 5.2、旧版 Element Plus）内部还在用@import，而你又通过@use引入了它，整个导入链就会被拉回 legacy 模式。
排查重点：
- 全局搜索项目里所有
@import，包括node_modules中未升级的包 - 不要试图用
@forward包装第三方@import库——@forward只转发@use模块，对@import无效 - 临时方案：把第三方样式改用
<link rel="stylesheet">或构建工具的 asset 加载，避开 Sass 编译链
真正麻烦的不是语法写错，而是模块边界被意外击穿——一处@import残留，就能让几十个@use形同虚设，且没有任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
