Vite: No loader is configured for ".svg" files

[Saartje87]

Heya!

Not sure if this is a bug or I am missing configuration. Project setup in Vite + vanilla-extract.

I'm trying to import an image resource within a css.ts file, like import backgroundUrl from '../../assets/background.svg';. Which I want to use as const container = style({ backgroundImage: url('${backgroundUrl}') });.

This way of importing works fine in .ts files where vite handles these imports. But in css.ts files I get an error "No loader is configured for ".svg" files". Because I'm using vite, I was kinda thinking vite would handle these imports.

Is there configuration missing? Or is this a bug?

Thanks

[mattcompiles]

Hey mate. This is a tricky one. What's actually happening is esbuild is compiling your .css.ts file which isn't setup to handle .svg files. We've been discussing about how best to handle images but it's tricky as each bundler integration is slightly different. Instead of writing an import statement try passing the png file path into the url() directly as that will allow Vite to handle it.