4

我知道关于这个的 SO 线程（我在下面链接了它们），但不幸的是我无法用它们解决这个问题，所以请允许我这个问题 :-)

我已经使用 Yeoman 引导了一个 AngularJS 项目，因此依赖于使用 bower.js 和 SCSS 的 grunt.js 构建。我想使用 bootstrap-sass-official 中的 font-awesome 和 glyphicons-halflings-regular。运行“grunt serve”时一切都很好，但是当我想创建一个文件集以进行分发时，对字体文件的引用并没有按应有的方式更新。

main.scss 包含

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
@import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

$fa-font-path: "../bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

但 dist/styles/123456.main.css 中的结果是类似的引用

@font-face{font-family:FontAwesome;src:url(/Users/markus/src/angular_app/.tmp/bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0);

因此，在我看来，路径似乎已更新（到 tmp 路径），但没有使用“dist”的正确值。我试图摆弄 gruntfile 中的 copy 和 rev 任务，但还没有找到正确的触发器，但是:(

我曾经为此找到解决方案的线程和其他来源：

有什么提示我可以如何解决这个问题吗？

4

3 回答 3

8

最后，我想通了：）

我认为 cssmin 是这个游戏中的坏人：它负责将 .tmp 路径写入最终的 css 文件。为了解决这个问题，我noRebase: true,在 Gruntfile.js 的 cssmin 任务中添加了该选项。

为了与字体引用相处，我还使用复制任务将字体复制到我的 dist 文件夹中，并且必须使用$icon-font-path: "../fonts/"它最终以正确的格式使用。

也许这会帮助陷入类似情况的人:-)

于 2014-06-03T12:07:23.263 回答
8

这是我的解决方案。我一点也不喜欢字体真棒的 scss。所以我所需要的只是一种方法来处理类似于 bootstrap 的 font-awesome，添加 css 或 js 然后完成它。

如果您在 yoeman 构建文件夹下打开 bower.json，您可以将覆盖部分更改为以下内容，

"overrides": {
"bootstrap": {
  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]
},
"font-awesome": {
  "main": [
    "less/font-awesome.less",
    "css/font-awesome.css"
  ]
}

}

一旦你这样做了，你的 font-awesome.css 就会出现在 index.html 构建部分，比如

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

当然，这假设你不会弄乱 scss，因此你可以删除 main.scss 中的 build 部分，以前是

// bower:scss
@import "bower_components/font-awesome/scss/font-awesome.scss";
// endbower

完成后，您grunt serve应该立即工作。为了开始grunt build工作，你只需要保持fontawesome的fonts文件夹和css文件夹之间的关系，这意味着将字体复制到/fonts，grunt文件看起来像，

    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      cwd: 'bower_components/font-awesome/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]

简而言之，我将 fontawesome 与 bootstrap 一样处理，没有任何自定义。

于 2015-08-17T14:27:33.420 回答
1

我没有遇到这个问题可能是因为我使用字体文件的相对路径，并且在构建 dist 时相同的路径无需修改即可工作。我只有一个复制任务：

copy: {
      fonts: {
        src: 'fonts/*',
        dest: 'dist/',
      },
...
于 2014-05-27T20:50:20.767 回答