原生esm不支持静态import css，仅动态import('./x.css', {assert:{type:'css'}})在chrome124+/firefox125+/safari17.4+中可用，需配合adoptedstylesheets且服务端返回text/css与cors头。
原生 ES Modules（ESM）本身不支持直接 import './style.css'，因为浏览器只执行 JavaScript 类型的模块，CSS 不是可执行脚本。但现代浏览器已逐步支持通过「动态导入 + CSS 导入断言」的方式加载 CSS 模块，这是目前唯一无需构建工具、纯原生可行的方案。
动态 import + assert { type: 'css' }
这是 ECMAScript 提案 Stage 3 的特性，Chrome 124+、Firefox 125+、Safari 17.4+ 已实现，但仅限 import() 动态调用，静态 import 语句不支持，写了也会被忽略。
- 语法必须为：
import('./style.css', { assert: { type: 'css' } }) - 必须在
<script type="module"></script>环境中运行 - 返回值是一个
CSSStyleSheet实例，可直接注入document.adoptedStyleSheets - 服务端需返回
Content-Type: text/css，且带Access-Control-Allow-Origin头（file://协议下会失败）
实际可用代码示例
以下是最小可行写法：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
<script type="module" src="./main.js"></script>
// main.js
async function loadCSS() {<br>
try {<br>
const sheet = await import('./style.css', { assert: { type: 'css' } });<br>
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];<br>
} catch (err) {<br>
console.error('CSS 加载失败:', err);<br>
}<br>
}<br>
loadCSS();
常见报错与排查要点
-
Failed to fetch dynamically imported module：检查路径是否含.css后缀（ESM 不允许省略） -
MIME type ('text/css') is not executable：确认服务端响应头含Content-Type: text/css - CORS 错误：确保服务器返回
Access-Control-Allow-Origin: *或对应源 - 静态 import 报错：不要写
import './style.css' assert { type: 'css' };，这在任何浏览器都不合法
替代方案（非原生 ESM，但更通用）
若需兼容旧版浏览器或简化开发流程，推荐结合构建工具：
-
CSS Modules：用
Button.module.css+import styles from './Button.module.css'，由 Vite/Webpack 编译为局部作用域类名 -
JS 层创建 link 标签：动态插入
<link rel="stylesheet" href="./style.css">，简单可靠，无兼容性限制 -
预处理器 + BEM/命名空间：用 SCSS 的
@use和规范命名，逻辑上模块化，不依赖运行时
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
