Reference assets in CSS

Vite copies over assets to the build folder. In order for Vite to pick up any of your custom assets you want referenced in your CSS file make sure to use absolute URLS.

CSS example

.test {
    background-image: url('/public/path/to/file.svg');
}
1
2
3

JS example

plugin(function({ addComponents, theme }) {
    const components = {
        '.test': {
            backgroundImage: 'url(/public/path/to/file.svg)',
        },
    }
    addComponents(components)
})
1
2
3
4
5
6
7
8