esbuild如何同时使用`.css:text`加载器和minify:true获取压缩后内嵌CSS文本

esbuild 的全局 minify 配置仅会处理 JS/TS 代码、以及作为独立资源打包的 CSS 文件，通过 text loader 导入的文件会被直接作为字符串嵌入，不会触发内置的 CSS 压缩逻辑。

方案1：自定义esbuild插件（推荐） #

无需引入额外依赖，直接复用esbuild自带的CSS压缩能力，实现逻辑如下：

1. 编写自定义插件，匹配CSS文件读取内容后先做压缩，再以文本格式返回

const cssTextMinifyPlugin = {
  name: 'css-text-minify',
  setup(build) {
    const fs = require('fs/promises')
    const esbuild = require('esbuild')

    build.onLoad({ filter: /\.css$/ }, async (args) => {
      const rawCss = await fs.readFile(args.path, 'utf8')
      // 调用esbuild内置CSS压缩能力
      const minifyResult = await esbuild.transform(rawCss, {
        loader: 'css',
        minify: true,
      })
      // 返回压缩后的内容，按text loader逻辑处理
      return {
        contents: minifyResult.code,
        loader: 'text',
      }
    })
  }
}

2. 将插件添加到你的esbuild配置中，同时删除原有配置里的.css: 'text' loader声明：

esbuild
  .build({
    target: 'es2020',
    minify: true,
    plugins: [cssTextMinifyPlugin],
    // 其余原有配置保持不变
  })

方案2：提前预处理CSS文件 #

如果不想修改构建配置，也可以使用clean-css等CSS压缩工具，提前把需要导入的CSS文件压缩后再存到项目中，直接导入压缩后的CSS文件即可，这种方案适合项目中需要作为字符串导入的CSS文件数量很少的场景。

如果你的项目中同时存在「需要作为字符串导入的CSS」和「需要单独打包为CSS文件的普通CSS」，可以通过特殊标识区分两类文件，避免插件冲突：

• 导入时给需要作为字符串的CSS路径添加自定义后缀，比如：
  import stylesAsString from './my-styles.css?raw'
• 把插件的匹配规则修改为filter: /\.css\?raw$/，其余普通CSS的打包逻辑不受影响。

内容的提问来源于stack exchange，提问作者Natasha