Vite is not able to resolve urls in @font-face

I want to organize the files in my dist folder according to their type.
For this reason during Vite build I set a Rollup option (assetFileNames) like this:

build: {
	rollupOptions: {
		output: {
			chunkFileNames: 'assets/js/[name]-[hash].js',
			entryFileNames: 'assets/js/[name]-[hash].js',
			assetFileNames: ({ name }) => {

				// Images
				if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
					return 'assets/img/[name]-[hash][extname]';

				// CSS & fonts
				if (/\.(css|woff|woff2)$/.test(name ?? '')) {
					return 'assets/css/[name]-[hash][extname]';

				// Default value
				return 'assets/[name]-[hash][extname]';

I’m using bootstrap-icons that is originally organized this way:


Consequentially the original font-face style I find in the CSS is:

@font-face {
     font-display: block;
     font-family: "bootstrap-icons"; 
         url("./fonts/bootstrap-icons.woff2") format("woff2"),
         url("./fonts/bootstrap-icons.woff") format("woff");

So there is a relation from CSS file to font file through the fonts subfolder.

Strange enough if I comment the “CSS & font” condition block and direct the .css and .woff files in the assets root, everything works fine. Rollup is able to resolve the new relation rewriting the url this way:

@font-face {
         url("./bootstrap-icons.woff2") format("woff2"),
         url("./bootstrap-icons.woff") format("woff");

But if I try to activate the “CSS & font” block sending the files in a subfolder, it doesn’t work anymore and I get:

@font-face {
         url("./css/bootstrap-icons.woff2") format("woff2"),
         url("./css/bootstrap-icons.woff") format("woff");

That is not correct because the root url is always the .css file’s one and not the assets folder.
If I try to reproduce the original structure with these conditions (.css on a folder, .woff on a subfolder):

    // Css
    if (/\.css$/.test(name ?? '')) {
            return 'assets/css/[name]-[hash][extname]';
    // Fonts
    if (/\.(woff|woff2)$/.test(name ?? '')) {
           return 'assets/css/fonts/[name]-[hash][extname]';

Rollup produces a wrong url again.

@font-face {
         url("./css/fonts/bootstrap-icons.woff2") format("woff2"),
         url("./css/fonts/bootstrap-icons.woff") format("woff");

Is there a way to make Vite/Rollup work with font-face with url?

I’m still stuck after a week of trying.

why would you even want to “rebundle” and rehash files that basically never change and could easily be deployed as a file copy off the public folder? Copy the fonts there and Vite will just copy them to your dist target.

I presume you’ve read about Rollup’s manualChunks and Vite’s splitVendorChunkPlugin to hook into the process.

It’s because the font files are linked from inside their own css file that I’m bundling inside the main bootstrap css file to avoid multiple http requests.

In my scenario the woff file “caller” needs to be built and for this reason it needs a predictable path to reference its font files.

Anyway I’m asking for a way to make Rollup work without changing my project structure. And unfortunately I found nothing useful in the documentation.