CSS循环引用会导致构建工具卡死或报错“Circular dependency”，根源是@import形成A→B→C→A闭环；需通过--verbose定位路径、手动画依赖图、抽离共享变量至顶层文件，并在SCSS中改用@use/@forward替代@import。
当CSS文件里出现A.css→B.css→C.css→A.css这样的嵌套导入链，构建工具会卡死或报错Circular @import，页面样式彻底失效。
确认是否真有循环引用
打开终端，进入项目根目录，运行构建命令并观察错误输出：【必须带--verbose或--debug标志】。Vite会直接打印出循环路径如“A → B → C → A”，Webpack则可能显示“ModuleDependencyWarning: Circular dependency”。没有明确提示就不是循环，别瞎猜。
检查所有.css和.scss文件里的@import语句，用文本搜索“@import”+引号内容，手动画出导入关系图。重点盯住公共基础文件（variables.css、mixins.css、base.css），它们最容易被多处反向引用。
定位循环源头的三步法
第一步：从报错中提取最短闭环路径，例如A→B→C→A，则优先检查B.css是否误import了C.css，而C.css又import了A.css。
立即学习“前端免费学习笔记（深入）”；
第二步：逐个打开闭环中的文件，删掉疑似引发倒挂的@import行，保存后立即重新构建——只要构建成功，就说明该行是罪魁祸首。
第三步：对删掉的@import行做重构。若B.css需要C.css里的变量，就把变量抽到更上层的shared.css里，让A、B、C都import shared.css，而不是互相import。
SCSS场景下必须改用@use/@forward
方法一：把所有@import "xxx"替换成@use "xxx" as xxx；【@use必须是文件第一行非注释代码】，否则编译直接失败。
方法二：在入口文件_index.scss里统一@forward基础模块，下游组件只@use "_index" as i;，再通过i.$color-primary调用，切断直接依赖链。
方法三：遇到第三方库仍用@import（比如旧版Bootstrap），不要试图用@forward包装它——fork后手动改写其内部@import为@use，或换用已升级的替代库。
Webpack/Vite中禁用原生@import解析
Vite用户在vite.config.ts中添加：css: { devSourcemap: true, postcss: { plugins: [require('postcss-import')({ resolve: (id) => id.endsWith('.css') ? id.replace(/\.css$/, '') : id }] } }，强制将.css路径转为模块路径。
Webpack用户在css-loader配置里设importLoaders: 0，并移除postcss-import插件——让@import语句不被解析，留待JS层动态加载，避免构建期死循环。
这一步操作起来很简单，直接把配置项加进vite.config.ts或webpack.config.js就行，改完立刻生效。
