Webpack打包后CSS层叠顺序颠倒，根源在于入口JS中import顺序未真实生效、SCSS因@import残留退化为legacy模式、mini-css-extract-plugin热更新动态插入<style>标签，或CSS被拆分到多个chunk；应严格按依赖层级书写import、全局清理@import、禁用HMR样式注入、统一CSS注入方式，并清空缓存验证真实DOM顺序。
Webpack打包后CSS层叠顺序颠倒，不是CSS写错了，而是构建时模块注入顺序与你预期的源码顺序不一致——这问题90%出在入口import链、插件配置或SCSS编译模式上，而不是浏览器加载。
检查入口JS中CSS import顺序是否真实生效
Webpack最终CSS输出顺序，由JS入口文件里import语句的书写顺序决定，不是HTML里的<link>，也不是SCSS里的@use顺序（除非它没被降级）。
- 确认你的主JS入口（如
src/index.js）中，CSS导入严格按依赖层级排列：import './styles/reset.css';→import './styles/variables.css';→import './styles/components.css';→import './styles/page/home.css'; - 避免在组件内部重复
import全局样式（比如Button.vue里又import '../styles/variables.css'），会导致同一份CSS被多次注入、顺序错乱 - 用
webpack --stats=verbose生成stats.json，搜索css和chunkName，看实际打包后各CSS模块是否被合并进同一个chunk，还是分散在多个异步chunk中
验证SCSS是否因@import残留退化为legacy模式
只要项目中任意一个SCSS文件含@import（哪怕只是第三方库的@import "bootstrap/scss/functions"），整个Sass编译链就强制降级，@use失效、命名空间消失、样式拼接逻辑崩坏，CSS输出顺序彻底失控。
- 全局搜索整个项目（含
node_modules）所有@import，特别注意vue.config.js或vite.config.js中sassOptions.additionalData是否偷偷注入了@import - 运行
sass --version，确保是Dart Sass ≥ 1.23.0；LibSass已废弃，不支持@use，会直接报错而非静默降级 - 临时把所有
@import替换成@use+@forward，并确保入口SCSS只@use、不写任何选择器——真正控制顺序的，是你在入口文件里@include或@extend的顺序
排查mini-css-extract-plugin的热更新与冲突警告
mini-css-extract-plugin在HMR开启时会动态插入<style>标签，这些标签默认追加到<head>末尾，天然晚于静态提取的CSS，造成视觉上“后加载覆盖前加载”的假象；而Conflicting order警告则说明多个chunk试图写同一份CSS规则但无法协调顺序。
立即学习“前端免费学习笔记（深入）”；
- 开发时把
mini-css-extract-plugin的hmr选项设为false，禁用热更新样式注入，只靠刷新页面验证真实顺序 - 生产环境若仍见
Conflicting order警告，在插件配置中启用ignoreOrder: true，但这只是掩盖问题——根本解法是收束CSS入口：确保只有一个JS入口文件import所有样式，避免import()动态加载CSS - 检查
optimization.splitChunks是否把CSS误拆到多个chunk中；可显式配置cacheGroups.styles，强制所有.css归入styleschunk
最终验证：看浏览器里真实的<style>标签顺序
别信构建配置，直接打开DevTools的Elements面板，展开<head>，观察所有<style>和<link rel="stylesheet">的DOM顺序——这才是浏览器实际应用的层叠顺序。
- 如果发现某个组件CSS的
<style>标签出现在reset.css的<link>之前，说明它被style-loader注入了，而其他是mini-css-extract-plugin提取的，二者混用必然顺序混乱 - 确保项目里只用一种CSS注入方式：
style-loader用于开发（HMR友好），mini-css-extract-plugin用于生产（提取文件），不要交叉配置 - 遇到z-index异常？先检查是否被
cssnano重计算过——在OptimizeCssAssetsPlugin或css-minimizer-webpack-plugin中设置safe: true，关闭z-index rebasing
最易被忽略的一点：你改完SCSS和JS import后，必须清空node_modules/.cache和dist，否则Webpack可能复用旧的缓存模块，让修复看似无效。
