使用 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",
    },
  });
})();

我的entry.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”未设置解析目录）`

如果我尝试使用打字稿导入来导入 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'],
        },
    }),
],

Answer 2

这里的问题是 vanilla-extract 运行自己的内部 esbuild。您需要使用必要的加载器配置或插件来配置此内部 esbuild 以进行 SVG 处理。

以下配置应该有效：

 ...

 plugins: [
   vanillaExtractPlugin({
      esbuildOptions: {
        loader: {
          '.svg': 'file'
        }
      }
    }),
  ]