根本原因是构建工具将源码import顺序与HTML中link顺序解耦。Vite默认合并CSS到末尾，Webpack依赖JS入口import顺序，动态加载会导致CSS插入不可控，解决需集中import全局样式并禁用@import和动态插入。
打包后 CSS 顺序错乱的根本原因
不是你写错了 import，也不是浏览器抽风，而是构建工具（Vite/webpack）在提取、合并、分块 CSS 时，把「源码中的 import 顺序」和「最终 HTML 中的 顺序」解耦了。你写的 import './Button.module.css' 在 JS 文件里，但构建后它可能被抽进 chunk-abc123.css，而这个 chunk 的插入时机由代码分割策略、入口依赖图、插件配置共同决定——和你在组件里 import 的先后毫无关系。
Vite 项目中 CSS 插入位置被插件劫持
Vite 默认会把所有 CSS 合并到一个 style.css 并放在 最末尾，除非你显式干预。常见干扰点包括：
- 启用了
css.preprocessorOptions（如scss配置），某些预处理器插件会生成额外 并追加到 head 末尾 - 用了
vite-plugin-css-injected-by-js或类似动态注入插件，它们通过document.head.appendChild()插入，天然晚于静态 -
build.rollupOptions.output.manualChunks配置不当，导致组件级样式被拆进和业务逻辑同名的 chunk，加载时机受 JS 执行顺序影响
验证方法：打开最终生成的 dist/index.html，不要看源 index.html，直接查 的实际顺序。
Webpack 项目里 CSS 顺序由 JS 入口决定
MiniCssExtractPlugin 不读取 HTML 里的 ，它只认 JS 中的 import 语句。所以：
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
- 如果你在
main.tsx里先import './theme.css'，再import './App.tsx'，而App.tsx又import './Header.module.css'，那最终 CSS 顺序是theme.css→Header.module.css - 但如果你用
React.lazy+import('./FeaturePage')动态加载模块，它的 CSS 会被打成独立 chunk，插入时机不可控，极可能覆盖已渲染的样式 - 多个入口（如
admin.tsx和user.tsx）共用同一份 CSS 提取配置时，chunk 合并逻辑可能把低优先级样式提前
解决路径：统一收口样式入口，在主 JS 入口顶部集中 import 所有全局层 CSS（reset.css、variables.css、components.css），组件级 .module.css 保持局部作用域，不参与全局顺序竞争。
真正难的不是修复一次，而是让顺序可预期
本地开发时样式正常，打包后错乱，本质是「开发时 CSS 是 inline style 标签或 HMR 注入，顺序靠 JS 执行流；生产环境变成物理文件 + link 标签，顺序靠构建配置」。最容易被忽略的点是：
- 没检查最终
dist/index.html，只盯着源码index.html调顺序 - 在 CSS 文件里用了
@import，它实际加载晚于外部 ，且无法被构建工具重排 - 以为 CSS Modules 能解决全局顺序问题——其实它只解决类名冲突，不解决文件加载先后
稳定顺序的底线：所有非模块化 CSS（reset/variables/components）必须通过 JS 入口集中 import，禁用 @import，禁用动态插入，最终 HTML 中的 应只有 1～2 个，且顺序明确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
