原生esm不支持静态import css，因规范禁止静态import使用assert；仅动态import('./x.css', {assert:{type:'css'}})在chrome124+/firefox125+/safari17.4+中可用，需配合adoptedstylesheets且服务端返回text/css与cors头。
原生 ESM 中无法直接 import CSS 文件，import './style.css' 会报 TypeError: Failed to fetch dynamically imported module 或 MIME type ('text/css') is not executable —— 浏览器默认只执行 application/javascript 类型的模块脚本，CSS 不是 JS，不支持原生加载。
为什么 import './style.css' assert { type: 'css' } 还不能用
这个语法（CSS Import Assertions）是 ECMAScript 提案 Stage 3 的特性，依赖浏览器对 assert 子句的支持。截至 2026 年 4 月：
- Chrome 124+、Firefox 125+、Safari 17.4+ 已实现基础
assert { type: 'css' }语法解析，但仅限于「动态导入」import()，不支持静态import语句 - 静态导入仍会触发 MIME 类型校验失败，即使写了
assert，浏览器也忽略它（规范明确禁止在静态import中使用assert） - 所有主流浏览器都要求被
import()加载的 CSS 文件必须返回Content-Type: text/css，且服务端需带Access-Control-Allow-Origin（CORS）头
能跑通的最小可行方案：动态 import + adoptedStyleSheets
这是目前唯一能在现代浏览器中稳定工作的原生方式，绕过 <link rel="stylesheet">，真正把 CSS 当作模块资源管理：
- 用
import('./style.css', { assert: { type: 'css' } })动态加载 CSS 模块（注意：必须在type="module"脚本内调用） - 加载成功后得到一个
CSSModuleScript实例（实际是CSSStyleSheet对象），可直接注入document.adoptedStyleSheets - 必须确保 HTML 是通过 HTTP(S) 服务打开（
file://协议下会被 CORS 和 MIME 限制拦截）
```js
// main.js（需在 <script type="module"> 中运行）
async function loadCSS() {
try {
const sheet = await import('./style.css', { assert: { type: 'css' } });
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
} catch (err) {
console.error('CSS load failed:', err);
}
}
loadCSS();
```</script>
常见错误和兼容性补救
遇到问题时，先确认以下几点：
-
import('./style.css')报404？检查路径是否带.css扩展名，ESM 不允许省略（./style❌） - 报
MIME type mismatch？本地开发务必用npx serve或python3 -m http.server启服务，别双击打开 HTML - 报
assert is not supported？说明浏览器版本太低，降级用<link rel="stylesheet" href="./style.css">+nomodule回退 - 想让多个组件各自封装样式？每个组件 JS 里单独
import()+adoptedStyleSheets.push()，避免全局污染
真正要注意的是：CSS Import Assertions 不是“让 import 支持 CSS”的银弹，它只是把 CSS 当作一种可加载资源类型；样式作用域、变量注入、热更新等能力依然得靠构建工具或自定义逻辑补足。别指望它自动做 scoped style 或 :host 选择器——那属于 CSS Modules 规范，和 ESM 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
