浏览器原生esm不支持静态import css，必须用动态import()配合assert: { type: 'css' }并手动注入adoptedstylesheets，但顺序不可控；真正可靠的是在index.html中显式按层叠顺序声明标签。
ESM中import './style.css'根本不会执行
浏览器原生ESM不支持静态import CSS文件，import './style.css'会直接报错：TypeError: Failed to fetch dynamically imported module 或 MIME type ('text/css') is not executable。这不是顺序问题，是语法不合法——ESM加载器只认application/javascript，CSS不是JS模块。
动态import('./x.css', { assert: { type: 'css' } })才真正生效，但顺序不可控
只有动态import()配合assert: { type: 'css' }能在Chrome 124+/Firefox 125+/Safari 17.4+中加载CSS模块，但它返回的是CSSStyleSheet实例，需手动注入document.adoptedStyleSheets。问题在于：
- 多个动态
import()没有执行顺序保证，哪怕写成await import('a.css'); await import('b.css');，实际插入adoptedStyleSheets的顺序仍取决于网络响应快慢 -
adoptedStyleSheets是数组，后push的样式表优先级更高，但无法像<link>那样通过DOM位置天然锁定层叠顺序 - 服务端必须返回
Content-Type: text/css且带CORS头，本地file://协议下必失败
Vite/Webpack项目里“看起来写了顺序”，其实被构建工具重排了
很多人在main.js里写import './reset.css'; import './components/button.css';，以为这就控制了顺序。实际上：
- Vite默认把所有CSS合并进一个chunk，最终生成的
<link>标签顺序由rollup打包逻辑决定，不是源码import顺序 - Webpack用
MiniCssExtractPlugin时，CSS chunk顺序受splitChunks策略影响，cacheGroups没配priority就可能被懒加载chunk提前注入 - 最终HTML里的
<link>顺序才是真实生效顺序，必须检查构建产物（如dist/index.html），而不是源index.html或main.js
真正安全的解法：放弃JS里import CSS，回归HTML显式控制
构建工具再智能，也难100%还原开发者对层叠顺序的意图。最可靠的方式是切断JS对CSS加载顺序的干预：
- 在
index.html的里显式写<link rel="stylesheet" href="/css/reset.css">、<link rel="stylesheet" href="/css/variables.css">等，严格按reset → variables → components → page分层排列 - 禁用Vite的
css.preprocessorOptions自动注入、Webpack的style-loader等会往末尾插<link>的功能 - 如果必须用CSS-in-JS（如
styled-components），得用CacheProvider或StyleSheetManager手动指定container，否则样式表默认挂载到最后，天然低优先级
顺序问题最难缠的地方不在技术实现，而在于它既不报错也不警告——你改完代码刷新，按钮颜色没变，但DevTools里那条color: red明明写着，只是被划掉了。这时候翻十遍JS import语句，不如打开dist/index.html看一眼<link>到底怎么排的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
