Метеор + бутстрап 3 Глификоны не работают

Question

Я пытался использовать бутстрап 3 с помощью Meteor, однако бутстрап работает, но Glyphicons нет. Когда файл с иконками импортируется, отображается следующая ошибка:

Resource interpreted as Font but transferred with MIME type  text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff". 

Answer 1

Вы разместили этот файл не в том месте. Все файлы, которые должны быть отправлены Метеор в качестве отдельных объектов, должны быть размещены внутри каталога /public.

 

---

 

Когда сервер получает Метеор путь, он сначала проверяет, имеется ли соответствующий файл в /public. Если он есть, он подается. В противном случае Meteor загружает себя клиенту в виде HTML-файла и затем обрабатывает путь в клиентском маршрутизаторе по выбору.

В вашем случае вы пытаетесь получить доступ к файлу, находящемуся в директории /client, а не в /public, поэтому возникает второй сценарий. В результате браузер получает HTML-файл с кодом Meteor, где предполагается получить шрифт.

Чтобы решить эту проблему, переместите шрифт в такое место, как /public/fonts/glyphicons-halflings-regular.woff, а затем получите доступ через /fonts/glyphicons-halflings-regular.woff везде, где он используется в CSS Bootstrap.

Answer 2

Вот мой bootstrap3 собственную структуру пакета, который работает, как ожидалось для меня:

bootstrap3 
|-> dist (bootstrap3 directory containint js/, css/ and fonts/) 
|-> bootstrap_override.css (override fonts paths) 
|-> package.js (package definition) 

bootstrap_override.css

@font-face{ 
    font-family:'Glyphicons Halflings'; 
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot'); 
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 

package.js

Package.describe({ 
    summary:"bootstrap 3.0 packaged for Meteor." 
}); 

Package.on_use(function(api){ 
    api.use(["jquery"],"client"); 
    // 
    api.add_files([ 
     // bootstrap fonts 
     "dist/css/bootstrap.min.css", 
     "dist/css/bootstrap-theme.min.css", (optional bootstrap2 lookalike theme) 
     // bootstrap javascript 
     "dist/js/bootstrap.min.js" 
    ],"client"); 
    api.add_files([ 
     "dist/fonts/glyphicons-halflings-regular.eot", 
     "dist/fonts/glyphicons-halflings-regular.ttf", 
     "dist/fonts/glyphicons-halflings-regular.svg", 
     "dist/fonts/glyphicons-halflings-regular.woff" 
    ],"client",{ 
     // undocumented hint : do not bundle those files along with with js/html resources 
     isAsset:true 
    }); 
    api.add_files([ 
     // overriding css 
     "bootstrap_override.css" 
    ],"client"); 
}); 

Этот пакет указать, что шрифты - это специальные ресурсы, которые не должны быть связаны с клиентом вместе с регулярными js/html, цитируя ядро ​​Dev David Glasser, «он должен быть необработанным и отдельно извлекаемым». (см. https://github.com/meteor/meteor/issues/1357)

Файл bootstrap_override.css необходим для переопределения путей родственников по умолчанию, определенных в bootstrap.css, с нашими абсолютными путями, связанными с пакетом.

Вы также можете использовать пакет bootstrap-3 из атмосферы. (https://atmosphere.meteor.com/package/bootstrap-3)

Answer 3

Используя Storm, я просверлил в папку .meteor> local> build> programs> web.browser> packages> twbs_bootstrap> dist> шрифты, чтобы найти библиотеки глифов и просто скопировал их в \ public \ fonts ,