Шрифты не найдены с вложенными маршрутами в реакционном маршрутизаторе

Я использую React, React-Router и Webpack (с webpack-dev-server), и у меня возникают проблемы с загрузкой пользовательских шрифтов на вложенных маршрутах.Шрифты не найдены с вложенными маршрутами в реакционном маршрутизаторе

Все отлично работает на моих неглубоких маршруты как /user, /group и т.д., но когда у меня есть вложенный маршрут как /group/user, пользовательские шрифты не загружаются (ошибка 404).

Webpack build помещает все шрифты на корневом уровне, как ожидалось (с именами файлов, такими как 7f690e503a254e0b8349aec0177e07aa.ttf), а при показе маршрута, например /user, шрифты загружаются должным образом.

Однако, если во вложенном маршруте, например /group/user, браузер пытается загрузить шрифты с URL-адреса, например /group/7f690e503a254e0b8349aec0177e07aa.ttf, которого не существует.

Я думаю, что где-то шрифт считается относительным путем, но я не знаю, где.

Как я могу сделать пути шрифта абсолютными путями, а не относительными? Или есть другой способ исправить это?

Не уверен, если это имеет значение, но я определил мои шрифты, как показано ниже в моем styles.less файле:

// Main font(s) 
@font-face { 
    font-family: 'Lato-Regular'; 
    src: url('../fonts/Lato-Regular.ttf') format('truetype'); 
}

источник

2015-12-29 MindJuice

В этом случае возможным решением является добавление base element на ваши страницы. Базовый элемент позволяет указать базовый URL-адрес, который будет использоваться по всему документу для относительных URL-адресов. Например, установка:

<base href="http://www.youdomain.com/">

источник

2015-12-29 01:16:23

Спасибо! Я добавил '' '' в свой '' index.html'', и теперь шрифты загружаются так, как ожидалось! Это определенно не то, что я знал и забыл. Я не знал, что '' '' даже существовал. – MindJuice

Мне все равно хотелось бы узнать, откуда отходит относительный URL. – MindJuice

Как вы используете менее, наиболее практичный способ для вас, чтобы исправить это будет настройка базовые пути, так что генерация кода создаст абсолютный путь в соответствии с вашей конфигурацией.

Пожалуйста, проверьте ниже документацию: http://lesscss.org/usage/.

источник

2015-12-29 00:45:41

Спасибо, но я уверен, что это не менее вызывает проблему здесь. Webpack преобразует шрифты и сохраняет их все в корне под новыми именами. Где-то на стороне браузера, где он решил найти шрифт относительно текущего вложенного URL маршрута. – MindJuice

Вы должны проверить фактический созданный файл CSS - потому что браузер не загружает «* .less» JavaScript, он загружает то, что генерировал пакет для него. Конечно, у вас есть относительный путь в вашем выходном CSS. –

У меня была такая же проблема, используя webpack и react router 4. Я решил это, переключившись с file-loader на url-loader в webpack.config.json.

Рабочий модуль - Погрузчик:

{ test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'url-loader?name=./Scripts/dist/[name].[ext]' }

источник

2017-10-16 11:06:07 Ogglas

Шрифты не найдены с вложенными маршрутами в реакционном маршрутизаторе

ответ

Смежные вопросы