#css #vue.js #vuejs3 #vite
Вопрос:
В main.scss я загружаю локальные шрифты из 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'); } затем в vite.config я загружаю main.scss:
css: { preprocessorOptions: { scss: { additionalData: `@import "@/assets/styles/main.scss";` } } }, но применяется весь css из main.scss, кроме шрифтов, я получаю ошибку:
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 Я на правильном пути или мне нужен какой-то другой подход (аналогично работает с Vue-CLI)?
Комментарии:
1. У меня та же проблема. Путь, кажется, не имеет к этому никакого отношения. В обоих случаях —
@/assets,../assets— шрифты не загружаются случайным образом при обновлении страницы. Но на производстве все кажется прекрасным. Я полагаю, что эта проблема связана с сервером разработки Vite.
Ответ №1:
Это был правильный путь, решение-это относительный путь, так что:
src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');