Import image with vanilla-extract and esbuild

Question

I have a problem with images importing using vanilla-extract and esbuild

my build file:

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

my entry.tsx

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

When i importing my image in "css" way

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

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

The compiler return error

Could not resolve "./x.svg" (the plugin "vanilla-extract" didn't set a resolve directory)`

If i am trying to import x.svg using the typescript import

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

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

I have other error

src/style.css.ts:5:16: error: No loader is configured for ".svg" files: src/x.svg'

Is it possible to import images with vanilla-extract modules without marking them as external?

score 0 · Answer 1 · answered Nov 26 '21 at 10:10

It not working now. Workaround is to use babel

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

Import image with vanilla-extract and esbuild

1 Answers1