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.woff访问Bootstrap 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）

Answer 3

使用Storm，我钻进.meteor文件夹＆gt;本地＆gt;构建＆gt;节目＆gt; web.browser＆gt;包裹＆gt; twbs_bootstrap＆gt; dist＆gt;用于查找glyphicons库的字体，我只是将它们复制到\ public \ fonts。

Meteor + Bootstrap 3 Glyphicons不工作

3 个答案: