原生 esm 不支持静态 import './style.css'，仅动态 import('./style.css', { assert: { type: 'css' } }) 在 chrome 124+ 等新浏览器中可行，但需 http(s) 服务、正确 mime 类型及 access-control 头，并手动注入 document.adoptedstylesheets。
原生 ESM 不支持 import './style.css' 这种写法，浏览器会直接报错 —— 不是语法错误，而是加载阶段就失败：要么 TypeError: Failed to fetch dynamically imported module，要么 MIME type ('text/css') is not executable。原因很实在：ESM 加载器只认 application/javascript，CSS 不是 JS，不能当模块执行。
为什么 import './style.css' assert { type: 'css' } 仍会报错
这个语法（CSS Import Assertions）虽已进入 Stage 3，但浏览器实现有硬性限制：
- Chrome 124+、Firefox 125+、Safari 17.4+ 仅支持在
import()动态导入中使用assert { type: 'css' }，静态import语句里写了也忽略（规范明确禁止） - 即使动态导入，服务端必须返回
Content-Type: text/css，且带Access-Control-Allow-Origin头（file://协议下必挂） - 返回的不是 JS 模块对象，而是一个
CSSStyleSheet实例，不能直接“执行”，得手动注入到document.adoptedStyleSheets
能跑通的最小可行方案：动态 import + adoptedStyleSheets
这是目前唯一不依赖构建工具、纯原生可落地的方式：
- 确保 HTML 通过 HTTP(S) 服务打开（如
http://localhost:5173），禁用file:// - JS 文件需在
<script type="module"></script>中运行（否则import()会报import() is not a function） - 代码示例：
const styleSheet = await import('./style.css', { assert: { type: 'css' } });
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet.default];
注意：styleSheet.default 是实际的 CSSStyleSheet 对象，不是命名导出；多次调用需合并数组，避免覆盖已有样式表。
替代方案：别硬刚原生 ESM，用构建工具更稳
如果你不是刻意追求“零构建”，以下方式更现实：
- Vite / Webpack / Rollup 等工具中，
import './style.css'可直接工作 —— 它们把 CSS 提取为<link rel="stylesheet">或注入style标签，不走浏览器原生加载流程 - 开发时用 Vite，它默认启用 CSS 模块化支持，连
type="module"都不用手动加 - 想保留原生体验又不想配服务？改用
@import写在 CSS 文件里（如main.css中写@import './reset.css';），这是 CSS 原生支持的模块化，无兼容性问题
真正容易被忽略的是服务端响应头和协议限制：哪怕代码全对，本地双击 HTML 打开、或 Nginx 没配 text/css MIME 类型，都会卡在第一步。动态 import CSS 不是“写对语法就能跑”，它是一整条链路 —— 浏览器支持、服务端配置、运行环境、注入时机，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
