6

我一直在尝试将 bootstrap 3 与 Meteor 一起使用，但是 bootstrap 可以工作，但 Glyphicons 不能。导入带有图标的文件时，会显示以下错误：

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

3 回答 3

13

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

 

 

Meteor 服务器获取路径后，首先会检查/public. 如果有，就送达。否则 Meteor 将自身作为 HTML 文件加载到客户端，然后在选择的客户端路由器中处理路径。

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

为了解决这个问题，将字体移动到类似的地方/public/fonts/glyphicons-halflings-regular.woff，然后通过/fonts/glyphicons-halflings-regular.woff在 Bootstrap 的 CSS 中使用它的任何地方进行访问。

于 2013-11-08T00:05:41.913 回答
5

这是我的 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');
}

包.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）

于 2013-11-08T00:21:55.050 回答
0

使用 Storm，我深入到 .meteor 文件夹 > local > build > programs > web.browser > packages > twbs_bootstrap > dist > fonts 以找到 glyphicons 库，我只是将它们复制到 \public\fonts。

于 2015-10-28T14:57:01.520 回答