Tengo una stylesheet de estilo en la carpeta css y algunas fuentes en la carpeta de fonts . Las fonts y las carpetas css están en el mismo directorio.

estructura de carpetas

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

He usado a.woff y b.woff2 en typography.css así:

 @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; }

Cambié base , rollupOptions.outPut y outDir de 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/", }, });

Todos los activos tienen la ruta correcta, excepto las fuentes, al crear la aplicación.

las fonts se generan en fonts y los archivos css se generan en la carpeta css . Pero las dos fuentes en un archivo css tienen una ruta incorrecta.

 @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; }

Debe ser como el siguiente ya que mis activos tienen la misma estructura de carpetas que la anterior (estructura de carpetas).

 @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; }

¿Cómo arreglar este problema?