html中无法原生用import加载css模块脚本；当前唯一可靠方式是，而import 'style.css' with {type:'css'}仅为实验性提案，未被主流浏览器稳定支持。
HTML 中怎么用 import 加载 CSS 模块脚本？
目前 HTML 标准里没有 <script type="module"></script> 直接导入 CSS 文件的原生能力，import 语句本身也不支持直接加载 .css。所谓“CSS Module Scripts”，是提案阶段的实验性功能（import 'style.css' with { type: 'css' };），尚未被任何稳定版浏览器默认启用。
你看到的“CSS Module Scripts”示例，基本都依赖于构建工具（如 Vite、Webpack）或手动启用 Chromium 实验标志（--enable-blink-features=CSSModuleScripts），且仅限本地调试。
- Chrome/Edge 111+ 可通过启动参数临时开启，但生产环境不可用
- Firefox 和 Safari 完全不支持
-
import 'xxx.css' with { type: 'css' };会抛出TypeError: Failed to resolve module specifier（如果未开启特性）
import 语句里写 CSS 路径为什么报错？
因为 ES 模块规范只允许 import 加载 JavaScript 模块。当你写 import './theme.css';，实际生效的是构建工具（如 Vite）的插件劫持：它把这行转译成 JS 动态创建 <style></style> 标签，或注入 CSS 字符串。
纯浏览器环境（无构建工具、无服务端处理）下，这行代码一定会报错：
Uncaught TypeError: Failed to resolve module specifier "./theme.css". Relative references must start with either "/", "./", or "../".
- 错误本质是模块解析失败，不是路径写错
- 即使改成绝对路径
import '/assets/theme.css';同样报错 - 只有配合打包器或自定义
importMap+ 加载器才能绕过
Vite 或 Webpack 下怎么真正启用 CSS 模块导入？
这不是靠改 HTML 或加 flag 实现的，而是靠构建时的模块解析规则。Vite 默认就支持 import './index.css';，Webpack 则需配置 css-loader + style-loader。
以 Vite 为例，你只需在 JS 中写：
import './base.css'; // ✅ 自动注入 <style> 标签<br>import styles from './button.module.css'; // ✅ 启用 CSS Modules（局部作用域）</style>
-
.module.css文件会被自动启用 CSS Modules，类名哈希化，避免全局污染 - 普通
.css导入等价于全局样式注入，无作用域隔离 - 若想动态加载，用
await import('./async.css')（Vite 支持，Webpack 需css-loader开启esModule: true）
想让浏览器原生支持 CSS 模块脚本，现在该怎么做？
别依赖它。当前唯一可靠方案是：用 JS 手动加载并插入 <link rel="stylesheet">，或用 fetch + <style></style> 注入。例如：
async function loadCSS(url) {<br> const res = await fetch(url);<br> const css = await res.text();<br> const style = Object.assign(document.createElement('style'), { textContent: css });<br> document.head.append(style);<br>}<br><br>loadCSS('/assets/theme.css');
- 这种方式完全兼容所有现代浏览器
- 注意 CSP 策略可能禁止
eval或内联样式，需配style-src 'unsafe-inline' - 如果追求模块化和作用域，仍需构建工具生成哈希类名，或改用
CSSStyleSheetAPI（Chrome 85+ 支持，但replace()不支持跨域 CSS）
CSS Module Scripts 提案还在演进，现阶段把它当个技术风向标就好，别放进上线代码里——那个 with { type: 'css' } 的语法，离日常可用还差两个大版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
