会，但仅限构建工具参与的场景；原生浏览器不解析import './style.css'，需Webpack/Vite等打包时提取CSS并自动注入link标签。
dynamic import() 加载含 CSS 的 JS 模块时，CSS 会自动注入吗
会，但仅限构建工具参与的场景。原生浏览器不解析 import './style.css' 这类语句——它根本不是标准语法。只有当你的代码经过 Webpack、Vite 或 Rollup 打包后，构建工具才会在打包阶段把 import 语句里的 CSS 提取为独立 chunk，并在 import() 返回的 Promise resolve 后，自动插入 <link rel="stylesheet"> 到 <head> 中。
这意味着：纯 HTML + 原生 ESM（没构建）下写 import('./module.js')，而 module.js 里写了 import './style.css'，浏览器直接报错 Unexpected token 'export' 或 Cannot use import statement outside a module——CSS 行根本不会被识别。
- 必须启用构建流程，且配置中开启 CSS 提取（如 Vite 默认开启，Webpack 需
MiniCssExtractPlugin） -
import()加载的是 JS chunk，CSS 是构建产物附带的“副作用”，不是 JS 运行时主动 fetch 的 - 开发环境热更新时，样式可能闪动或未及时应用，因 HMR 注入逻辑与构建时的自动注入机制不同
不用构建工具时，如何真正原生按需加载 CSS
唯一可靠方式是手动创建 <link> 并插入 document.head。这是浏览器原生支持、零依赖、所有现代浏览器（Chrome 28+、Firefox 22+、Safari 9+、Edge 12+）都兼容的做法。
关键点不是“能不能”，而是“怎么避免重复插入”和“怎么知道它加载完了”：
立即学习“前端免费学习笔记（深入）”；
- 插入前用
document.querySelector(`link[href="${href}"]`)检查是否已存在，防止重复请求和样式冲突 - 监听
link.onload和link.onerror，而不是靠定时器或setTimeout - 如果后续 JS 逻辑依赖新样式（比如读取
getBoundingClientRect()），建议包裹在requestAnimationFrame里，确保样式已计算
示例函数：
function loadCSS(href, onLoad) {
if (document.querySelector(`link[href="${href}"]`)) {
onLoad?.();
return;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.onload = () => onLoad?.();
link.onerror = () => console.warn(`Failed to load CSS: ${href}`);
document.head.appendChild(link);
}为什么不能用 @supports 实现按需加载 CSS 文件
@supports 是纯 CSS 规则，只控制已有样式的启用/禁用，**不触发任何网络请求**。它无法加载新文件，也不能配合 import() 或 fetch() 自动工作。
常见误解是写一段：
@supports (display: grid) {
@import 'grid-layout.css'; /* ❌ 无效！@import 在 @supports 内部不被支持 */
}这在任何浏览器中都不会生效。正确做法是用 JS 检测：
- 用
CSS.supports('display', 'grid')判断特性支持 - 再调用
loadCSS('grid-layout.css')手动加载 - 注意：IE 完全不支持
CSS.supports()，需降级处理
动态加载 CSS 时最容易忽略的三个细节
第一，href 路径必须完全一致：大小写、斜杠方向、查询参数（如 ?v=1）不同，就会被当成两个资源重复加载；第二，服务端要正确返回 Content-Type: text/css，否则部分浏览器（尤其是旧版 Safari）可能拒绝应用；第三，服务端渲染（SSR）场景下，JS 动态插入的 CSS 不会出现在初始 HTML 中，可能导致 FOUC（Flash of Unstyled Content），需要在服务端预判条件并内联关键样式。
