@use必须位于文件最顶部，其前仅允许空行或注释；常见错误包括Vite配置中additionalData注入前置内容、文件含BOM、混用@import与@use、路径错误或隐藏字符。
@use 必须出现在文件最顶部，前面只能有空行或单行/多行注释，任何其他内容（包括变量赋值、@import、选择器、@mixin）都会触发 @use rules must be written before any other rules 错误。
检查文件开头是否有隐藏内容
即使你肉眼看到 @use 在第一行，也可能因以下原因失败：
- Vite 配置中
css.preprocessorOptions.sass.additionalData注入了前置代码（如全局变量或另一条@use），实际编译时它会拼在你文件最前 - 文件编码含 BOM（Byte Order Mark），尤其 Windows 编辑器保存时默认添加，Sass 会把它当“非空白字符”处理
- VS Code 或其他编辑器在保存时自动插入 license header 注释 —— 如果它带
/**块注释且换行后紧跟@use，某些 Sass 版本仍会报错 - 路径别名（如
@/styles/vars）解析失败，导致 Sass 尝试 fallback 到文本替换逻辑，间接破坏顺序
排查 Vite / Webpack 的全局注入配置
构建工具常通过配置向每个 SCSS 文件注入前置内容，这是最隐蔽的诱因：
- 检查
vite.config.ts中是否设置了additionalData或旧版prependData，例如：additionalData: '@use "@/styles/vars.scss" as *;'—— 这会让所有文件开头都强制加这一行，你自己的@use自然就变第二行了 - 若必须全局注入，改用显式
@use：删掉additionalData，改为在项目唯一入口 SCSS 文件（如src/styles/index.scss）顶部集中写@use，再由它@forward或@include控制下游 - Webpack 用户需检查
sass-loader的additionalData选项，逻辑同上 - 确认
sass版本 ≥ 1.71.0（Dart Sass），旧版对 BOM 和注释边界的判断更严格
验证路径与模块加载链
@use 位置合法 ≠ 路径正确，路径错误可能触发降级行为，间接导致顺序校验失效：
立即学习“前端免费学习笔记（深入）”；
- 路径必须真实存在，且不能含
.scss后缀或下划线前缀（@use "variables"可匹配_variables.scss或variables.scss，但@use "_variables.scss"会失败） - 避免混用
@use和@import：只要文件中出现任意@import，整文件立刻退化为 legacy 模式，@use被忽略，此时 Sass 不再执行顺序校验，但变量访问会失败 —— 表象是“位置没错却报错”，实则是降级后命名空间失效 - 第三方库（如 Bootstrap @import 引入，也会污染整个依赖链，建议隔离使用或升级
- 用命令行验证：
sass --trace src/styles/main.scss可定位到具体哪一行被判定为“非空白前置内容”
真正卡住人的往往不是语法本身，而是构建工具注入、编码 BOM、路径别名未生效这三者叠加 —— 它们不会直接报错，但会让 @use 失效得毫无征兆。先关掉 additionalData，用绝对路径直连文件，再逐个开灯排查。
