SCSS编译失败导致CSS为空文件，主因是@use位置错误、}后含非法字符或路径不合法；需检查首行是否为@use、渲染空白符排查}后异常、确保路径无扩展名/中文/BOM，并删除@import、统一UTF-8编码、移除干扰性@charset声明。
SCSS编译失败导致CSS文件为空或缺失，不是CSS写错了，而是构建流程在解析阶段就已中断——浏览器里样式全丢、开发者工具Network面板看不到CSS内容、甚至生成的CSS文件大小为0字节。
确认是否真为空文件
直接用文本编辑器打开生成的CSS文件（如dist/css/style.css），观察内容是否完全空白，或仅含注释、空行、BOM头；若文件存在但无任何有效CSS规则，说明编译器根本没输出。
右键该CSS文件→“属性”→查看“大小”，【0 字节即确认为空】；非零但内容异常（如只有@charset声明），仍属编译中断范畴。
定位SCSS语法致命错误
SCSS语法解析失败只由两类原因触发：@use语句位置/路径非法，或}后混入不可见非法字符。
立即学习“前端免费学习笔记（深入）”；
方法一：检查@use是否为首个非注释语句
打开所有被引用的SCSS源文件（尤其是入口文件如main.scss），确保第一行是@use或@forward，前面不能有空行、BOM、HTML注释、CSS注释/* */或任何缩进。Dart Sass会因首行非@use而静默跳过整个文件。
方法二：全局搜索}并逐个检查后缀字符
在VS Code中按Ctrl+Shift+P→输入“Toggle Render Whitespace”→回车开启空白字符渲染；逐个点击每个}符号右侧，看是否紧跟着逗号、空格、Tab、换行或{；重点排查Vue单文件组件
方法三：验证路径合法性
@use "src/styles/variables" ✅，但@use "src/styles/_variables.scss" ❌；路径必须不含扩展名、下划线前缀、中文、空格；项目根目录不能含中文（如D:\我的项目\必须改为D:\my-project\）。
清除残留干扰项
第一步：删除全部@import语句
SCSS中@import与@use不兼容；即使@import写在文件末尾，也会阻断@use加载，且不报错。全局搜索@import，逐行删净，不留注释残余。
第二步：检查文件编码
用VS Code打开所有SCSS文件，右下角确认状态栏显示“UTF-8”，而非“UTF-8 with BOM”。若显示后者，点击切换→“Save with Encoding”→选“UTF-8”。【记事本保存的SCSS文件100%带BOM，绝对禁用】
第三步：移除@charset声明干扰
@charset "UTF-8";必须是文件第一行、第一个字符；若前面有空格、空行或BOM，Dart Sass直接拒解析。删掉整行@charset，让编译器自动处理编码。
