如何让esbuild支持Vite式css?inline导入（CSS转字符串）

Vite的?inline CSS导入语法是其自身扩展的功能，并非esbuild原生支持，所以直接用原生esbuild构建时会被解析为外部CSS文件。要实现相同效果，需要通过自定义esbuild插件处理带?inline后缀的CSS导入：

自定义esbuild插件实现inline CSS导入 #

编写一个插件拦截带有?inline的CSS路径，移除后缀后用text loader加载文件内容，将其转为字符串：

const inlineCssPlugin = {
  name: 'inline-css',
  setup(build) {
    // 匹配并拦截带?inline的CSS文件导入
    build.onResolve({ filter: /\.css\?inline$/ }, args => ({
      path: args.path.replace(/\?inline$/, ''),
      namespace: 'inline-css',
    }));

    // 用text loader处理命名空间内的文件，返回字符串内容
    build.onLoad({ filter: /.*/, namespace: 'inline-css' }, args => ({
      loader: 'text',
      path: args.path,
    }));
  },
};

在esbuild构建脚本中使用插件 #

将上述插件加入esbuild配置，即可让import otherStyles from './bar.css?inline'正常返回CSS字符串：

require('esbuild').build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [inlineCssPlugin],
}).catch(() => process.exit(1));

原理说明：Vite在开发环境中基于esbuild做了上层封装，添加了对?inline这类自定义查询参数的处理逻辑；原生esbuild没有内置该功能，因此需要通过插件手动拦截并调整文件的加载方式。

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