@error中断构建却看不到报错，因Webpack默认不显示完整上下文，需配置sassOptions: { verbose: true }；Vite可能吞日志；CI中sass --quiet或stdout重定向会静默丢弃；插值未定义变量则先报解析错误。
@warn 和 @error 不是 CSS 调试工具，它们只在 Sass 编译阶段生效，且完全不感知 HTML、浏览器或运行时行为——用错场景，就等于没写。
为什么 @error 会中断构建但看不到报错？
Webpack + sass-loader 默认不显示 @error 的完整上下文，终端只打印红字错误，但不带文件路径和行号；Vite 则可能把错误吞进日志深处。根本原因不是指令失效，而是构建配置没暴露它。
- Webpack 项目必须显式配置
sassOptions: { verbose: true }，否则@error只输出 “Compilation failed.” 一行 - Vite 项目需检查
vite.config.ts中是否禁用了css.devSourcemap或覆盖了sass选项 - CI 脚本里用了
sass --quiet或重定向 stdout（如> /dev/null），@error直接被静默丢弃 -
@error字符串里插值了未定义变量（如#{$missing}），会先触发更底层的解析错误，掩盖你原本想抛的提示
@warn 在终端没输出？先查这四件事
@warn 不是“写了就有人看”的提醒，它是编译流水线里的一个信号，漏掉它往往是因为信号根本没发出去。
- 该 SCSS 文件没被
@use或@import引入——顶层@warn写在未引用的_utils.scss里，等于没写 - 用了旧版
node-sass@4.x：插值语法@warn "xxx #{$val}"会直接编译失败，得改成@warn "xxx " + $val - 警告写在
@mixin或样式块内部（如.old-btn { @warn "..."; }），Sass 不允许，直接报语法错误 - 开发时双击打开 HTML、或用 VS Code Live Server 直接跑，绕过了 Sass 编译流程，
@warn压根不会执行
怎样让 @error 报错真正帮到调用方？
无效的 @error 是“Invalid value”，有效的 @error 是一句能让人立刻改对的话。
立即学习“前端免费学习笔记（深入）”；
- 必须包含三要素：错误位置（哪个
@mixin或@function）、非法输入（#{$size}值）、修复建议（“Allowed: #{map-keys($sizes)}”） - 校验要前置——别在
@mixin最后加兜底@error，而应在开头用@if not map-has-key(...)拦住 - 避免在
@function体内用@error：函数内报错会导致调用处样式丢失且无提示，应在调用前用@if + @warn提醒 - 不要在
@each循环里反复触发@error，一次就够了；重复报错不会叠加，反而掩盖第一个真实问题点
最常被忽略的一点：@warn 和 @error 都无法扫描 HTML 模板或 Vue/JSX 中的 class 字符串——你写了 @warn "btn-large 已废弃"，但团队在 <div class="btn-large"></div> 里硬编码，它就彻底失效。真要拦截，得靠 PostCSS 插件配合 SCSS 函数封装，缺一不可。
