使用vanilla-extract与esbuild导入图片报错如何解决？

两个报错的核心原因如下：

1. vanilla-extract插件默认不会处理样式定义中直接写的url()相对路径
2. 插件内部编译.css.ts文件时，不会继承你在esbuild顶层配置的loader规则

修复步骤 #

修改你的esbuild构建配置，给vanillaExtractPlugin传入对应配置项即可：

• 开启processCssUrls: true，让插件自动解析css中的相对路径资源
• 在esbuildOptions中补充.svg的loader配置，让插件内部编译时能识别svg文件导入

修改后的构建代码如下：

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({
        // 开启css url路径处理
        processCssUrls: true,
        // 给插件内部的esbuild实例配置loader
        esbuildOptions: {
          loader: {
            ".svg": "file"
          }
        }
      })
    ],
    loader: {
      ".svg": "file",
    },
  });
})();

两种写法均可正常使用 #

配置修改完成后，你尝试的两种导入写法都可以正常运行：

1. 直接在样式中写相对路径url：

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

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

路径为相对于当前.css.ts文件的相对路径即可

2. 提前导入svg后传入样式：

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

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

内容的提问来源于stack exchange，提问作者dm.shpak