原生ESM中import './style.css'必然失败，因加载器仅接受application/javascript MIME类型；Chrome 124+支持动态import('./style.css', {assert: {type: 'css'}})，但需HTTP(S)服务、正确Content-Type与CORS头，并手动注入document.adoptedStyleSheets。
原生 ESM 中 import './style.css' 必然失败
浏览器原生模块加载器（type="module"）只接受 application/javascript MIME 类型的响应，import './style.css' 会直接在加载阶段报错，典型错误是：TypeError: Failed to fetch dynamically imported module 或 MIME type ('text/css') is not executable。这不是语法问题，而是加载器拒绝处理非 JS 资源——CSS 不是可执行模块。
Chrome 124+ 支持动态 import + assert { type: 'css' }，但限制极多
这个写法仅在动态导入中有效：await import('./style.css', { assert: { type: 'css' } })，且必须满足以下全部条件：
- 页面通过 HTTP(S) 服务打开（
file://协议下必然失败） - 服务端返回的响应头含
Content-Type: text/css - 跨域请求需带
Access-Control-Allow-Origin头 - 运行环境必须是
<script type="module"></script>，否则import()报import() is not a function - 返回值是
CSSStyleSheet实例，不是 JS 模块对象，不能直接“执行”，必须手动注入：document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet.default]
Babel 本身不处理 CSS import，它只转译 JS 语法
babel-loader 或 @babel/preset-env 完全无视 import './style.css' 这类语句——Babel 不解析、不重写、不拦截，它只管 JS 代码的语法转换。如果你在 Babel 环境里写了这行，Webpack/Vite 等构建工具会靠自己的 loader（如 css-loader + style-loader）接管处理，和 Babel 无关。
- 常见误解：以为配了
@babel/preset-env就能“支持” CSS import —— 实际上它连这行代码都看不到 - 真正起作用的是 Webpack 的
module.rules配置，或 Vite 的内置 CSS 处理逻辑 - 若你用 Babel 单独跑（如
babel-node），这行 import 会直接抛出Cannot find module错误，因为 Node.js 原生不认 CSS 文件
真正能落地的方案只有两个，别硬扛原生限制
想让 import './style.css' 看起来“直接可用”，实际路径只有两条：
-
用构建工具（推荐）：Vite 默认支持，Webpack 配
css-loader+style-loader或mini-css-extract-plugin，它们把 import 编译成或内联，完全绕过浏览器加载器限制 -
退守 CSS 原生机制：删掉 JS 里的 import，改用
@import写在主 CSS 文件里（如main.css中写@import './reset.css';），这是 CSS 规范原生支持、无兼容性问题的模块化方式
试图在纯 Babel + Node 环境或 file:// 下“模拟” CSS import，只会陷入路径解析、MIME 模拟、注入时机等层层陷阱——这些都不是 Babel 的职责，也不该是它的职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
