我一直在尝试在Meteor中使用Bootstrap 3,但是Bootstrap可以正常工作,但是Glyphicons无法正常显示。当带有图标的文件导入时,会显示以下错误:
Resource interpreted as Font but transferred with MIME type text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff".
我一直在尝试在Meteor中使用Bootstrap 3,但是Bootstrap可以正常工作,但是Glyphicons无法正常显示。当带有图标的文件导入时,会显示以下错误:
Resource interpreted as Font but transferred with MIME type text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff".
您将此文件放错了位置。所有应由Meteor作为单独实体提供的文件都应放置在/public
目录中。
当Meteor服务器收到路径时,首先检查/public
中是否有匹配的文件。 如果有,则将其提供。 否则,Meteor将自身作为HTML文件加载到客户端,并在客户端路由器中处理路径。
在您的情况下,您正在尝试访问位于/client
目录而不是/public
目录中的文件,因此发生第二种情况。 结果,浏览器获得带有Meteor代码的HTML文件,而不是所需的字体。
要解决此问题,请将字体移动到像/public/fonts/glyphicons-halflings-regular.woff
这样的位置,然后通过/fonts/glyphicons-halflings-regular.woff
在Bootstrap的CSS中使用。
这是我自己的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");
});