SCSS嵌套报错主因是缩进不合法、层级过深、作用域错误及Node Sass迁移兼容问题；需统一空格缩进、控制嵌套≤4层、确保@use在顶部、替换@import为@use并验证语法。
编译报错“Invalid CSS after”：嵌套缩进不合法
这类错误通常出现在 SCSS 文件里用了空格缩进而不是统一的 Tab，或者混用了空格和 Tab。Dart Sass 对嵌套缩进敏感，@media、&、属性块内部的嵌套必须严格对齐，否则会直接中断编译。
- 检查所有嵌套层级是否使用相同数量的空格（推荐 2 或 4 空格），禁用编辑器“自动混合缩进”功能
- 避免在嵌套选择器中写
{后换行再缩进——SCSS 不需要花括号，换行即表示嵌套开始 - 如果用了
&引用父选择器，确保它紧贴上一行末尾或独占一行，不要加多余空格，例如：&:hover正确，& :hover（中间有空格）会报错 - VS Code 用户可安装 “EditorConfig for VS Code” 插件，并配置
indent_style = space和indent_size = 2
嵌套过深导致解析失败：Dart Sass 的层级限制与规避
Dart Sass 默认不限制嵌套深度，但实际项目中超过 5–6 层嵌套时，容易触发语法歧义，尤其当混用 @at-root、& 和插值 #{} 时，编译器可能误判作用域边界，抛出类似 Expected newline 或 Invalid CSS after "...": expected "{", was "}" 的错误。
- 把深度 > 4 的嵌套拆成独立选择器，或用
@mixin封装重复结构 - 避免在嵌套块内写
@import—— Dart Sass 要求@import必须位于顶层或@mixin外部 - 若必须多层组合，优先用
&显式拼接，比如：.card { &__header { &--large { ... } } }，比靠缩进更可控 - 运行
sass --trace your.scss可定位具体哪一行缩进/结构异常
SCSS 变量或函数在嵌套中不可见：作用域陷阱
在嵌套规则里引用未声明的 $variable 或调用未 @use 的函数，Dart Sass 不会报“变量未定义”，而是转为输出原始字符串，最终生成无效 CSS，浏览器控制台显示 Invalid property name 或直接忽略整条规则。
- 确保所有
@use都写在文件最顶部，且路径正确（如@use "src/styles/functions" as *;） - 嵌套块内不能声明新变量并立即使用（如
$tmp: red; color: $tmp;在同一块内允许，但跨嵌套层级不可见） - 用
@debug $var在嵌套块开头临时插入调试语句，确认变量值是否如期注入 - 注意
@forward导出的变量需显式as *或命名空间调用，不能直接裸用
从 Node Sass 迁移后嵌套报错：兼容性断点
Node Sass（基于 LibSass）容忍部分松散语法，比如嵌套中漏掉换行、& 后多加空格、甚至某些非法插值；Dart Sass 则严格执行 spec。迁移后常见错误包括：Expected "}"、Invalid CSS after "&:not"、Invalid selector。
立即学习“前端免费学习笔记（深入）”；
- 批量替换所有
@import为@use，旧式全局变量导入（如@import "variables"）会导致嵌套内变量失效 - 检查是否用了已废弃的
/deep/或::v-deep写法混入 SCSS 嵌套——它们是 Vue 作用域样式语法，不属于 Sass，应移出style块或改用:deep() - 运行
sass --update --no-source-map src/**/*.scss可批量检测语法问题，比 webpack 构建时的报错更早暴露 - 特别留意
@each和@for循环内的嵌套：Dart Sass 要求循环体必须用大括号包裹，即使只有一行
sass --no-stdin input.scss 单独编译验证，别等整个项目 build 才发现。 
