错误根源是Sass解析器在右花括号}后遇到非法字符（如逗号、换行），期望新选择器却得到无效内容；常见于嵌套规则末尾冗余逗号、缩进不一致或@use作用域误用。
“Invalid CSS after” 报错基本都跟括号、花括号或逗号的位置有关，不是语法写错，而是 Sass 解析器在某个 } 后面“看懵了”——它以为该写新选择器，结果撞上一个逗号或换行。核心问题不在逻辑，而在结构断点是否合法。
报错 Invalid CSS after "}"：定位那个“幽灵逗号”
这个错误提示里最关键的线索是引号中紧跟 } 的那个字符（通常是 , 或 newline）。它几乎从不指真正的错误行，而是指解析器“卡住”的位置——也就是上一个规则块结束之后的非法内容。
- 打开报错文件，直接搜索
}，然后肉眼检查每个}后面是不是紧跟着,、空格+换行、或者意外的注释 - 重点盯嵌套层级较深的地方，比如
.card { .header { ... } },—— 这个结尾的逗号就是元凶 - Vue 单文件组件中，
<style lang="scss">区块末尾多一个换行+逗号也常触发此错 - 用 VS Code 的“显示所有字符”功能（Ctrl+Shift+P → Toggle Render Whitespace），能立刻暴露隐藏空格和制表符混用
@use 和嵌套混用时变量不可见：作用域比你想的更严格
Dart Sass 不会在嵌套块里自动向上查找未声明的变量，也不会把 @use 的导入“透传”进子块。你看到的不是报错，而是生成无效 CSS（比如 color: $primary; 原样输出），浏览器直接忽略整条规则。
-
@use必须出现在文件最顶部，且不能被任何其他语句（包括空行、注释）隔开 - 嵌套块内不能靠“父级已定义”来引用变量，必须显式引入或通过
@mixin传参 - 调试时加一句
@debug $var;在嵌套块开头，如果输出Debug: null，说明变量根本没注入进来 - 避免
@use "xxx" as *，改用命名空间调用（如colors.$primary），防止同名变量覆盖或冲突
嵌套缩进不合法：空格 vs Tab 不是风格问题，是编译器红线
Dart Sass 对缩进零容忍：同一文件必须统一用空格，且每层缩进数固定（推荐 2 或 4）。混用 Tab 和空格、或某层多缩进一个空格，都会让解析器误判嵌套边界，抛出 Invalid CSS after 或 Expected newline。
立即学习“前端免费学习笔记（深入）”；
- 禁用编辑器“detect indentation from content”类自动识别功能，强制设为
indent_style = space - SCSS 不需要花括号，缩进即嵌套；所以
.btn { &--large { ... } }是合法的，但.btn {<br>&--large { ... } }（换行后缩进）会出错 -
&必须紧贴上一行末尾或独占一行，& :hover（中间有空格）会被当作文本字面量处理 - 运行
sass --trace your.scss可获得带调用栈的错误定位，比默认报错更准
从 node-sass 迁移到 sass 后嵌套突然报错：松散语法被收紧了
LibSass（node-sass 底层）曾容忍不少“看起来差不多”的写法：& 后多空格、嵌套里漏换行、插值写法模糊。Dart Sass（sass 包）按 spec 严格执行，这些过去能过编译的代码现在直接中断。
- 检查所有
&引用：确保没有& :hover、&.active（缺空格）这类边界模糊写法 - 删除嵌套规则块末尾的逗号，哪怕它看起来“像在分隔多个子选择器”
- 避免在嵌套内部写
@import，Dart Sass 要求它只在顶层或@mixin外部 - 升级后首次编译失败，别急着改业务代码——先确认
sass-loader配置里implementation正确指向require('sass')
真正难排查的不是报错本身，而是错误位置和实际问题之间的偏移：一个嵌套深处的多余逗号，会让编译器在几百行之后才崩溃，并把锅甩给完全无关的行。盯住报错信息里的那个具体字符（,、{、newline），逆向找它前面最近的那个 }，基本就找到了病灶。
