Невозможно загрузить шрифты с файловым загрузчиком и webpack v2

Question

У меня возникли проблемы с загрузкой шрифтов с помощью webpack v2 и файлового загрузчика. Используя url-loader для любых файлов шрифтов, все работает отлично. Тем не менее, я хочу использовать файловый загрузчик, чтобы мы могли кэшировать файлы шрифтов, а не хранить все изображения и шрифты в комплекте js-файла.

Я использую webpack v2, css-modules и postcss (и postcss-loader).

Чтобы попытаться сделать все просто, я определяю @ font-face в таблице стилей global.pcss, которая включена в мой основной файл index.jsx. (Это была временная мера во время отладки этой проблемы. Обычно все @ декларации шрифта лицо будет в отдельном файле)

@font-face { 
    font-family: 'ProximaNova-Rg'; 
    src: './ProximaNova-Rg'; 
    font-weight: normal; 
    font-style: normlal; 
} 

:global html { 
    font-family: 'ProximaNova-Rg', Comic Sans Ms; 
} 

В моей index.jsx файл, который является точкой входа для приложения WebPack, импортировать что файл global.pcss

import './global/global.pcss' 

Все остальные стили в файле global.pcss применяются правильно.

Моего WebPack конфигурация выглядит следующим образом шрифтов

{ 
    test: /\.(otf|eot|ttf|woff2?)(\?\S*)?$/, 
    use: 'file-loader?name=fonts/[name]-[hash].[ext], 
} 

Если я выгрузить файл-загрузчик выше для URL-загрузчика, что шрифт нагрузки правильно. Используя файловый загрузчик, когда я создаю проект, я могу подтвердить, что файловый загрузчик создает правильно названный файл шрифта и перемещает его в папку dist, но мой проект загружает комиксы вместо Proxima Nova, eww.

Я понятия не имею, как продолжить отладку этого. Любая помощь будет чрезвычайно оценена.

Answer 1

Итак, я понял, что здесь происходит. Кажется, что проблема заключается в загрузчике файлов-загрузчиков + при загрузке активов (шрифты/изображения) в таблицу стилей И включение sourceMaps в стиле-загрузчике.

Существует известная ошибка с загрузчиком стиля, в которой вы не можете использовать относительный publicPath в своей конфигурации webpack с включенными sourceMaps и вместо этого должны использовать абсолютный путь [см. webpack/style-loader issue #55].

So TL; DR, чтобы решить эту проблему, я изменил publicPath в своем веб-пакете с '/' до 'http://0.0.0.0:8080/'.