修复Sass中@use规则无法加载CSS的问题

在前端开发内容学习中，如何修复Sass中@use规则无法加载CSS的问题是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

@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">时，同样适用这套规则——@use必须在<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形同虚设，且没有任何提示。