I have a stylesheet in css folder and a few fonts in fonts folder. fonts and css folders are in the same directory.

folder structure

|-fonts
|   |--- a.woff
|   |--  b.woff2      
|
|-css
    |--- typography.css
    

I have used a.woff and b.woff2 in typography.css like this:

@font-face {
  font-family: "basis-pro";
  src: url("../fonts/a.woff2") format("woff2"),
    url("../fonts/b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

I have changed base, rollupOptions.outPut and outDir of vite.config.js.

export default defineConfig({
  base: "./",
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          var info = assetInfo.name.split(".");
          var extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = "img";
          } else if (/woff|woff2/.test(extType)) {
            extType = "fonts";
          }
          return `static/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
      },
    },
    outDir: "./../backend/src/main/resources/static/app/",
  },
});

All of the assets have correct path excepts fonts when building the app.

fonts are generated in fonts and css files are genereted in css folder. But the two fonts in a css file has wrong path.

@font-face {
  font-family: "basis-pro";
  src: url("./a.woff2") format("woff2"),
    url("./b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

It must be like the following as my assets has the same folder structure as the above (folder structure).

@font-face {
  font-family: "basis-pro";
  src: url("../fonts/a.woff2") format("woff2"),
    url("../fonts/b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

How to fix this issue?