En main.scss cargo fuentes locales de la carpeta assets/styles/fonts :
@font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype'); } @font-face { font-family: 'Opensans-Light'; font-style: normal; src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype'); } luego en vite.config cargo main.scss :
css: { preprocessorOptions: { scss: { additionalData: `@import "@/assets/styles/main.scss";` } } }, pero se aplica todo el css de main.scss excepto las fuentes, aparece el error:
downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf¿Estoy en el camino correcto o necesito algún otro enfoque (funciona de manera similar con Vue-CLI)?
Esa fue la forma correcta, la solución es la ruta relativa, entonces:
src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype'); y establecer alias en vite.config.js :
resolve: { alias: { '@': path.resolve(__dirname, 'src'), } }