Vanilla Extract Vite Plugin Fix for Image files
MIT License
Meant to be used with vanilla-extract and its Vite plugin. See this.
pnpm add esbuild-vanilla-image-loader -D
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { ImageLoader } from 'esbuild-vanilla-image-loader'
export default defineConfig({
plugins: [
vanillaExtractPlugin({
esbuildOptions: {
plugins: [ImageLoader()],
}
}),
],
})
// src/style/App.css.ts
import { style } from '@vanilla-extract/css'
import Pic from './pic.png'
export const root = style({
backgroundImage: `url(${Pic})`,
height: 200,
width: 200
})
ImageLoader({
filter: /\.(gif|jpe?g|tiff?|png|webp|bmp|svg)$/,
dataUrl: false, // Read file as dataurl
})
MIT