SCSS编译失败导致CSS为空或缺失，主因是@use语法位置/路径错误或}后存在逗号、空格、换行等非法字符；需确保@use位于首行非注释位置、路径不带扩展名和下划线、删除所有@import残留，并开启空白字符渲染排查隐藏符号。
SCSS语法解析失败，不是CSS写错了，而是编译器根本没跑通——生成的CSS文件为空或缺失，浏览器里样式全丢。核心原因只有两类：@use语法写错位置/路径，或}后面混入了逗号、空格、换行等非法字符。
SCSS里@use报错：Invalid CSS after "@use"
这不是警告，是编译直接中断。Dart Sass要求@use必须是文件中第一个非注释、非空行语句，任何前置内容（包括空行、BOM、注释）都会让它拒绝执行。
-
@use不能放在@media、@if或选择器内部——哪怕只缩进一个空格也不行 - 路径不带扩展名和下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 别用
@use "utils" as *——Sass ≥5.0 明确禁止这种写法，会直接报错 - 如果项目里还残留
@import，它不会报错但会阻断@use加载，必须全删干净
SassError: Invalid CSS after "}" 的真实定位方法
报错行号基本不准，别盯着那行改。真凶藏在某个}后面——可能是逗号、空格、Tab，也可能是AI生成代码里多出来的,或{。
- 全局搜索
}，逐个检查每个}后是不是紧跟着,、{、换行或空格 - VS Code里按
Ctrl+Shift+P→Toggle Render Whitespace，看有没有隐藏空格或Tab混用 - 重点盯Vue单文件组件的
<style lang="scss">末尾、嵌套块结尾、&--modifier写法后 - 复制粘贴来的代码尤其危险，比如
.btn { &--large { } },末尾这个逗号就是典型雷点
中文路径或UTF-8 BOM导致静默失败
SCSS文件里有中文注释或变量值，但构建工具读取时用了错误编码，结果不报错、不输出CSS、连日志都空——这是最隐蔽的失败模式。
立即学习“前端免费学习笔记（深入）”；
- 项目路径不能含中文，例如
D:\我的项目\必须改成D:\my-project\ - 文件保存为
UTF-8 without BOM（VS Code默认就是；记事本默认带BOM，绝对别用） -
@charset "UTF-8";必须是文件第一行、第一个字符，前面不能有任何空格或空行 - 如果你还在用Ruby Sass（极少见），得手动改
engine.rb，在require后加Encoding.default_external = Encoding.find('utf-8')
最容易被忽略的是：错误发生在@use语句之前（比如BOM或空行），整个文件就完全不解析；而}后的非法字符可能藏在文件末尾，编辑器默认不显示，必须开空白字符渲染才能看见。
