浏览器原生es module不支持import css，会报typeerror；需构建工具、服务端mime配置（chromium 120+实验性）或fetch+cssstylesheet手动注入；后者兼容性最佳但需处理浏览器差异。
ES Module 中 import CSS 会报错：Uncaught TypeError: Failed to resolve module specifier
浏览器原生 ES Module 不支持直接 import './style.css'，这是最常遇到的错误。模块解析器只认 JavaScript 文件，遇到 CSS 后缀就直接抛出 TypeError: Failed to resolve module specifier，和打包工具（如 Webpack/Vite）的行为完全不同。
必须通过构建工具或服务端支持才能 import CSS
原生 <script type="module"></script> 本身不处理非 JS 资源，想让 import 加载 CSS，得满足以下任一条件：
- 使用支持 CSS 模块导入的构建工具（如 Vite、esbuild、Rollup + 插件），它们会在构建时把
import './a.css'转成动态创建<link rel="stylesheet">或内联样式 - 后端服务器配置 MIME 类型响应头：对
.css请求返回Content-Type: text/css，且浏览器支持（仅 Chromium 120+ 实验性支持importCSS，需启用chrome://flags/#enable-css-imports） - 用
import()动态导入配合CSSStyleSheetAPI 手动注入（见下一条）
手动 import CSS 的可行方案：fetch + CSSStyleSheet
如果坚持不用构建工具，又想在 JS 中“导入”样式，可以用动态 fetch 读取 CSS 字符串，再用 CSSStyleSheet 注入。这是目前兼容性最好、真正“原生”的做法：
// utils/loadCSS.js
export async function loadCSS(url) {
const res = await fetch(url);
const cssText = await res.text();
const sheet = new CSSStyleSheet();
sheet.replaceSync(cssText);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
}
调用方式：
import { loadCSS } from './utils/loadCSS.js';
loadCSS('./theme.css');
- 注意：
CSSStyleSheet在 Safari 15.4+ 和 Chrome 93+ 支持，Firefox 尚未实现replaceSync，需降级用insertRule逐条注入（复杂度陡增） -
document.adoptedStyleSheets只影响当前文档，无法作用于 shadow DOM 外部样式隔离场景 - 该方式不触发
<link>的预加载、缓存策略或媒体查询逻辑，要自己处理
别把 import CSS 当作“语法糖”，它本质是资源加载行为
很多人以为 import './x.css' 和 import './x.js' 是同等级操作，其实不是。JS 模块有明确的执行时序、作用域和导出机制；而 CSS 是副作用资源，没有导出值，也没有执行上下文。强行统一 import 语义，反而掩盖了加载时机、作用域、缓存控制这些关键差异。
真正容易被忽略的是：即使某天浏览器全面支持 import './a.css'，它也不会自动解决 scope 隔离、按需加载、主题切换或 SSR 样式水合等问题——这些仍得靠应用层设计，而不是依赖 import 语法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
