现代浏览器不支持html中直接以模块方式引入css文件，仅为声明式资源加载机制，非原生模块；真正的css模块化依赖构建工具（如vite、webpack）或js运行时api（如cssstylesheet）。
现代浏览器不支持直接在 HTML 中以模块方式引入 CSS 文件 —— 你看到的 <link rel="stylesheet" href="style.css"> 从来就不是模块系统的一部分，它只是静态资源加载机制。所谓“CSS 模块”（CSS Modules）或“CSS Script Modules”是构建工具（如 Webpack、Vite）或 JavaScript 运行时层面的概念，不是原生 HTML 标准能力。
为什么 <link> 不是模块，但有人叫它“CSS Module”？
这是术语混淆导致的常见误解。“CSS Module”在工程实践中通常指：用构建工具将 button.module.css 编译成带哈希作用域的类名（如 _button_module__primary_abc123），从而避免全局污染。它依赖 JS bundler 的处理，和 HTML 的 <link> 标签无关。原生 HTML 中的 <link rel="stylesheet"> 没有导入导出、无作用域、无依赖图、不参与 ES 模块解析流程。
-
<link>是 declarative（声明式）加载，浏览器按顺序 fetch 并阻塞渲染，但不会执行、不会求值、不返回模块对象 - 真正的“模块化 CSS”必须通过 JS 控制：比如用
import styles from './Button.module.css'，再把生成的类名注入 DOM - 即使你写
<link rel="modulepreload" href="style.css">，浏览器也只预加载，不会当作模块解析
import 语句能直接加载 CSS 吗？
不能。标准 ES 模块语法中，import 只接受 JavaScript 文件（或带有 assert { type: "json" } 的 JSON）。尝试写 import './theme.css' 会报错：TypeError: Failed to resolve module specifier "theme.css" —— 除非你用了 Vite 或 Webpack 这类工具，并且它们已配置了 CSS 导入插件（如 Vite 的默认行为）。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- Vite 允许
import './index.css'，是因为它在 dev server 阶段把 CSS 内容转成 JS 模块，导出空对象，并同时 inject<style></style>标签 - Webpack 需要
css-loader+style-loader才能支持，否则构建失败 - 纯浏览器环境（无构建工具）下，该写法直接报错，无法运行
真正接近“原生 CSS 模块”的提案：constructable stylesheets
这是目前唯一被现代浏览器（Chrome 73+、Firefox 94+、Safari 15.4+）部分实现的底层 API，允许 JS 创建可复用、可封装的样式表对象：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`.card { color: blue; }`);
document.adoptedStyleSheets = [sheet];
但它仍不是“HTML 中引入”，而是 JS 运行时操作；它不解决路径解析、tree-shaking、作用域隔离等工程问题，仅提供更底层的样式表控制能力。
-
CSSStyleSheet对象可被多个 Shadow DOM 复用，适合 Web Components 场景 - 无法直接在 HTML 中声明，必须通过 JS 创建和挂载
- 不替代
<link>，而是补充：它绕过文档流加载，避免 FOUC，但需手动管理生命周期
真正容易被忽略的是：所谓“CSS 模块化”本质是工程链路问题，不是浏览器加载机制问题。你在 HTML 里写一百个 <link>，它们依然共享全局作用域、无依赖顺序保障、无法按需加载——这些短板只能靠 JS 层抽象（如动态 import() 加载组件 + 注入对应 CSS）来补足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
