SCSS编译卡死大概率是递归混入未设终止条件，导致Dart Sass无限展开、CPU飙升，构建工具超时中断；需用@sass --trace+@debug定位，禁用@import和HMR辅助排查。
SCSS编译卡死但无报错，大概率是递归混入（@mixin + @include）没设终止条件
SCSS 本身不报“栈溢出”或“超时”，而是让 Dart Sass 进程 CPU 占用飙升、内存暴涨，最终构建工具（如 Webpack/Vite）因等待响应超时而中断，错误信息常为 build failed after 30s 或 sass compile hang。这不是配置问题，而是逻辑缺陷：一个 @mixin 在自身内部无条件 @include 自己，或通过中间 mixin 间接调用，形成无限展开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局搜索项目中所有
@include后紧跟同名@mixin定义（尤其注意带参数的，比如@include loop($i: $i + 1)） - 重点检查动画生成、层级嵌套（如
.parent { @include children-styles(); }）、递归列表/树形结构样式等高频场景 - 临时在可疑
@mixin开头加@debug "looping with #{$i}";，观察控制台是否持续输出——这是最直接的证据 - 用
sass --no-source-map src/index.scss /dev/null命令绕过构建工具直跑编译，能更快暴露卡死点
为什么 @import 混用会让死循环更难定位
当项目里存在任意一处 @import（包括第三方库如 @import "~bootstrap/scss/functions"），整个 SCSS 编译链会降级为 legacy 模式，@use 失效、变量作用域扁平化、@mixin 查找路径混乱。此时递归调用可能跨文件隐式发生，且调试信息（如 @debug 行号）指向压缩后的位置，无法回溯原始文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 执行
sass --version确认是 Dart Sass ≥ 1.23.0；若显示 LibSass，立即升级，它根本不支持现代模块系统 - 用
grep -r "@import" src/ node_modules/bootstrap/扫描全量代码，删掉所有@import，改用@use+@forward - 检查构建配置（如
vite.config.ts中的sassOptions.additionalData），确认没有偷偷注入@import
如何用最小闭环验证是否真有死循环
别在完整项目里反复试错。新建一个极简 test.scss，只引入疑似有问题的模块，并手动触发一次调用：
@use "path/to/suspect" as s; @include s.problematic-mixin(1);
然后终端运行：sass --trace test.scss /dev/null。加上 --trace 会强制输出完整展开路径，一旦出现重复的文件名+行号连续滚动，就是铁证。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果
--trace输出过长，用head -n 100截取前100行看模式 - 遇到
@content块参与递归时，需额外检查传入的@include是否又触发了同一套逻辑 - Vue 单文件组件中
<style lang="scss"></style>内的混入，要单独抽离到 .scss 文件再测，避免@vue/compiler-sfc的二次解析干扰
构建工具层的超时掩盖了根本问题
Webpack 的 css-loader 或 Vite 的 @vitejs/plugin-vue 默认设置 30 秒构建超时，这会让真实死循环被截断，你看到的只是 “build timeout”，而非 “stack overflow”。更糟的是，某些插件（如 mini-css-extract-plugin）在热更新时会启动多个并发编译进程，导致同一份坏代码被同时执行多次，CPU 直接拉满。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 临时关闭 HMR，在 Vite 中设
server.hmr: false；Webpack 中禁用HotModuleReplacementPlugin - 把构建命令中的
--watch去掉，用一次性编译代替监听，排除状态残留干扰 - 若用 Umi.js，检查
tailwindcss插件是否启用了timeout配置——它和 SCSS 死循环无关，但错误归因会浪费大量时间
@include generate-grid($cols: 0) 导致无限减一。这种 case 必须靠 @debug + --trace 组合验证，不能只盯着报错信息猜。 
