esbuild打包后为什么CSS文件没被提取出来？

培乐 Dev 提问于 2026-03-10 16:36:21 阅读 3

优化

我用 esbuild 构建项目时，发现所有的 CSS 都被打包进 JS 文件里了，而不是生成独立的 .css 文件。明明看到文档说可以通过 bundle: true 和 outfile 配合输出 CSS，但实际跑起来还是内联在 JS 里。

我的配置是这样的：

require('esbuild').build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  loader: { '.css': 'css' }
})

是不是漏了什么参数？还是 esbuild 默认不支持分离 CSS？

我来解答赞 1 收藏

反馈

1 条解答

Prog.向景 Lv1

兄弟，你这个配置我当初也踩过坑。

问题在于你用了 outfile，esbuild 只认这个输出路径，不会自动给你生成 CSS 文件。改成 outdir 就好了：

require('esbuild').build({

  entryPoints: ['src/main.js'],

  bundle: true,

  outdir: 'dist',

  loader: { '.css': 'css' }

})

这样跑完你会发现 dist 目录下同时生成了 bundle.js 和 bundle.css。

如果你就想要指定输出文件名，那还有另一种玩法——用 esbuild-plugin-css 这个插件，配置稍微复杂点，但能让你控制 CSS 的输出路径。

简单总结：想自动分离 CSS，用 outdir 别用 outfile，就酱。

2026-03-10 18:11