esbuild - 使用 vanilla-extract 和 esbuild 导入图像

Question

我在使用vanilla-extract和esbuild导入图像时遇到问题

我的构建文件：

const { build } = require("esbuild");
const { vanillaExtractPlugin } = require("@vanilla-extract/esbuild-plugin");

(async () => {
  await build({
    entryPoints: ["src/entry.tsx"],
    bundle: true,
    minify: true,
    sourcemap: true,
    platform: "browser",
    outfile: "dist/entry.js",
    plugins: [vanillaExtractPlugin()],
    loader: {
      ".svg": "file",
    },
  });
})();

我的条目.tsx

import { someStyle } from "./style.css";
console.log(someStyle);

当我以“css”方式导入图像时

import { style } from "@vanilla-extract/css";

export const someStyle = style({
  backgroundColor: "url(./x.svg)",
});

编译器返回错误

无法解析“./x.svg”（插件“vanilla-extract”没有设置解析目录）`

如果我尝试使用 typescript import 导入 x.svg

import { style } from "@vanilla-extract/css";
import svg from "./x.svg";

export const someStyle = style({
  backgroundColor: `url(${svg})`,
});

我还有其他错误

src/style.css.ts:5:16：错误：没有为“.svg”文件配置加载程序：src/x.svg'

是否可以使用vanilla-extract模块导入图像而不将它们标记为external？

Answer 1

它现在不起作用。解决方法是使用 babel

import babel from 'esbuild-plugin-babel';
plugins: [
    babel({
        filter: /.*.css.ts/,
        config: {
            presets: ['@babel/preset-typescript'],
            plugins: ['@vanilla-extract/babel-plugin'],
        },
    }),
],