Meteor + Bootstrap 3 Glyphicons不工作

Question

我一直在尝试使用带有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". 

Answer 1

您已将此文件放在错误的位置.应将Meteor作为单独实体提供的所有文件放在/public目录中.

 

 

当Meteor服务器获取路径时,它首先检查是否存在匹配的文件/public.如果有,则送达.否则,Meteor会将自身作为HTML文件加载到客户端,然后在所选的客户端路由器中处理该路径.

在您的情况下,您尝试访问目录中的文件而/client不是文件中的文件/public,因此第二种情况发生.因此,浏览器获取带有Meteor代码的HTML文件,它应该接收字体.

要解决此问题,请将字体移动到类似的位置/public/fonts/glyphicons-halflings-regular.woff,然后通过/fonts/glyphicons-halflings-regular.woffBootstrap的CSS中使用的任何位置进行访问.

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一起捆绑在客户端上的特殊资源,引用核心开发人员David Glasser"它需要是未处理的并且可以单独获取".(见https://github.com/meteor/meteor/issues/1357)

bootstrap_override.css文件是必要的,用我们的包相关的绝对路径覆盖bootstrap.css中定义的默认亲属路径.

您也可以在大气中使用bootstrap-3包装.(https://atmosphere.meteor.com/package/bootstrap-3)