esbuild 能直接打包 css 是因其内置 css loader，import './style.css' 会触发依赖解析、递归收集与聚合，最终输出独立 css 文件；需启用 --bundle 并配合 --outfile 或 --outdir 才生效。
esbuild 本身就能直接打包 CSS，不需要额外 loader 或插件——只要在 JS 入口里 import 它，它就会被提取、合并、输出为独立 CSS 文件。
为什么 import './style.css' 就能产出 CSS 文件？
esbuild 把 import 语句当作资源依赖来处理，遇到 CSS 文件时会自动启用内置的 CSS loader。它不会把样式内联进 JS，而是：
- 解析
@import、url()等引用，递归收集所有依赖的 CSS - 将所有内容聚合后，按构建配置输出到单独文件（如
dist/index.css） - JS bundle 中只保留空的
import语句（无运行时副作用）
前提是必须启用 --bundle 和指定 --outfile（或 --outdir），否则 CSS 不会被提取。
如何确保 CSS 被正确输出到 dist 目录？
关键不是写法，而是命令行参数或配置项是否触发了「CSS 提取逻辑」：
- 用
--outfile=dist/app.js单文件输出时，CSS 会自动写入同目录下的dist/app.css - 用
--outdir=dist多入口时，CSS 会写入dist/index.css（默认命名）或根据入口名推导，如home.js→home.css - 如果没看到 CSS 文件，大概率是漏了
--bundle，或者用了--splitting但没配--format=esm（CSS 提取仅支持 ESM 输出格式）
示例命令：esbuild src/index.js --bundle --outdir=dist --format=esm
遇到 CSS 中的 url() 路径错乱怎么办？
esbuild 默认把 url(./logo.png) 解析为相对于 CSS 文件的位置，但输出后目录结构变了，路径就容易 404。解决方式很直接：
- 用
--asset-names=[name]-[hash]统一控制资源命名，避免混淆 - 加
--public-path=/assets/告诉 esbuild 所有相对 url 都要补上前缀 - 或者改写 CSS 中的路径为
url(/assets/logo.png)，配合服务器静态资源托管
注意：--public-path 对 JS 中的 import 图片也生效，保持行为一致。
想让 CSS 在 JS 加载完后再注入？别这么干
esbuild 的 CSS 提取是构建期行为，生成的是纯静态文件。如果你在 JS 里动态 import('./style.css')，它会走 dynamic import 路线，结果是：
- 开发时可能触发 HMR 重载，但生产构建下仍会被提前提取
- 无法保证执行顺序，尤其和
stylex.create这类运行时样式系统冲突 - 破坏零运行时开销的设计目标
真正需要「按需加载样式」的场景，应该用 CSS code-splitting + link 标签手动管理，而不是依赖 import 行为——esbuild 不鼓励、也不保证这种用法的稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
