sass编译后样式不生效，90%是编译失败而非css写错：要么报错中断、要么静默生成空文件或404；需先通过network面板确认css状态码为200且响应体含有效编译后内容，再排查语法、路径及环境问题。
直接说结论：Sass 编译后样式不生效，90% 不是 CSS 写错了，而是 Sass 根本没编译成功——要么报错中断，要么静默失败生成空文件。别急着改选择器或加 !important，先确认浏览器里加载的到底是不是你写的那堆 SCSS 编译出来的 CSS。
检查 Sass 是否真正编译出有效 CSS 文件
编译失败时，你看到的“样式不生效”，往往只是 HTML 在加载一个空文件、404 文件，或旧缓存文件。关键看 Network 面板里那个 CSS 请求的状态码和响应内容：
- 状态码不是
200（比如404、0或blocked）→ 路径或构建配置出问题 - 状态码是
200但响应体为空或只有注释 → Sass 编译中途退出，没生成有效内容 - 响应体有内容但全是原始 SCSS（比如含
@mixin、$color）→ 加载的是源文件而非编译后产物，link指向了.scss而非.css
SassError: Invalid CSS after "}" 的真实定位方法
这个错误提示行号基本不可信。它不是告诉你“这里少了个 }”，而是说解析器在某个 } 后面撞上了不该出现的东西——逗号、空格、Tab、换行，甚至 BOM 字符。常见真凶位置：
- Vue 单文件组件的
<style lang="scss"></style>块末尾多了一个逗号，例如：.btn { &--large { } }, - 嵌套规则结尾处粘连了空格或 Tab，尤其 AI 生成代码里常见：
&:hover { color: red; }后面跟了个空格再换行 - 全局搜索所有
}，用编辑器开启“显示空白字符”（VS Code 中按Ctrl+Shift+P→Toggle Render Whitespace），重点盯}紧邻的右侧字符 - 文件开头有 BOM（哪怕只一个零宽字符），会导致 Dart Sass 解析失败且不报明确错误，只输出空 CSS
Node 版本升级后 node-sass 绑定失效
Node Sass could not find a binding 是典型环境失配，不是语法问题。Node 升级后，预编译的二进制模块路径变了，Sass-loader 找不到对应 binding 就直接跳过编译步骤。
- 先试
npm rebuild node-sass --force，强制重装绑定 - 若报
gyp ERR!，Windows 用户需管理员权限运行npm install --global --production windows-build-tools - Node v17+ 常见 OpenSSL 错误，临时加环境变量：
NODE_OPTIONS=--openssl-legacy-provider npm rebuild node-sass - 更彻底方案：卸载
node-sass和旧版sass-loader，改用sass（Dart Sass） +sass-loader@^13，并在 Webpack 配置中显式指定：implementation: require('sass')
中文路径或 UTF-8 BOM 导致静默编译失败
项目路径含中文（如 D:\我的项目\）或 SCSS 文件带 BOM，Ruby Sass 会直接读取失败；Dart Sass 虽兼容性好些，但遇到 BOM 仍可能跳过部分规则或输出异常。
- 项目根目录路径必须纯英文、无空格、无中文（
D:\my-project\✅，D:\我的项目\❌） - 所有 SCSS 文件保存为
UTF-8 without BOM（VS Code 默认符合；记事本默认带 BOM，禁用） - 文件第一行必须是
@charset "UTF-8";，且前面不能有任何字符（包括空格、空行、BOM） - 若仍在用 Ruby Sass（如 Koala、旧版 HBuilder），需手动改
engine.rb：在require之后、module Sass之前加一行Encoding.default_external = Encoding.find('utf-8')
最麻烦的不是报错，而是 Sass 悄悄失败却没给你任何提示——生成一个空 CSS 文件，浏览器照常加载，你还在反复调选择器权重。务必养成习惯：每次改完 SCSS，先看 Network 里 CSS 响应体是否真有内容、是否有你刚写的类名，再打开 Elements 面板确认元素上有没有对应 class。否则，排查方向全错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
