根本原因是import语句顺序、模块依赖图与loader/插件行为叠加导致css注入时序失控；浏览器实际加载的link标签顺序由webpack拓扑排序和chunk分割策略决定，而非源码书写顺序。
Webpack打包后CSS顺序错乱，根本原因不是“打包错了”，而是你写的import语句顺序、模块依赖图、以及loader/插件行为三者叠加导致的最终注入时序失控——浏览器看到的
为什么import './a.css'; import './b.css';不等于a在b前面
Webpack把每个import当做一个模块节点，构建时按依赖关系生成拓扑序，而不是线性执行顺序。尤其当：
-
a.css里@import 'variables.css'，而b.css也@import 'variables.css'→ Webpack会把variables.css提成公共依赖，插入位置由chunk分割策略决定，不一定紧贴a.css - 用了
MiniCssExtractPlugin，它按JS chunk的import链合并CSS → 如果b.js里import './b.css'被抽成单独chunk，它生成的CSS可能异步加载，晚于a.css - 热更新（HMR）开启时，
style-loader动态追加新的<style></style>标签，旧标签不动，新标签永远在末尾
如何确认是Webpack导致的顺序问题
别看源码，直接查最终HTML和DevTools：
- 打开生产环境页面 → 查看源码（右键→“查看页面源代码”）→ 搜索
<link rel="stylesheet"> → 看实际生成的<code>href顺序是否符合预期 - 如果用
MiniCssExtractPlugin，源码里应该只有一个<link>；如果出现多个，说明有多个CSS chunk没被正确合并 - 在DevTools的Elements面板里选一个元素 → Styles侧边栏中找被划掉的样式 → 点击来源文件名 → 如果跳转到的
<link>在你期望的样式文件之后，就是顺序反了
真正可控的修复方式：入口统一 + 显式拼接
放弃靠多个import语句“碰运气”，改用单点控制：
- 删掉所有组件内部的
import './xxx.css'，只保留在JS入口文件（如src/index.js）顶部的一次导入：import './styles/index.scss'; - 在
styles/index.scss里，用@use（不是@import）加载变量/混合宏，再手动按需@include或写规则，例如：@use 'base/variables';<br>@use 'components/button';<br>@use 'pages/home';<br><br>// 顺序即输出顺序<br>button.style();<br>home.layout();
- 确保
webpack.config.js中entry只声明一个JS入口，并显式包含该SCSS：entry: { app: ['./src/index.js', './src/styles/index.scss'] }
容易被忽略的关键细节
很多团队修了一周才发现问题出在这几个地方：
-
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，但有人把它硬塞进开发环境rule里，导致开发时用style-loader、生产用MiniCssExtractPlugin.loader，两套顺序逻辑完全不一致 - Vue单文件组件里写了
<style src="./xxx.css"></style>，这种写法绕过Webpack的模块图，变成独立资源请求，加载时机不可控 - SCSS里混用
@use和@import→ Dart Sass强制把所有@use提到最前，@import全扔到后面，彻底打乱你的书写意图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
