yeoman/angular grunt build 中未更新对字体（font-awesome）资源的引用

Question

我知道关于这个的 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 任务，但还没有找到正确的触发器：(

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

• Fontawesome is not working when project is built with grunt
• Assets missing in Angular application built using grunt
• Font awesome URL not coded in main.css for grunt dist
• http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/
• https://github.com/yeoman/generator-angular/issues/350

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

Answer 1

终于明白了：）

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

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

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

Answer 2

这是我的解决方案。我根本不喜欢字体真棒的 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 一样处理，没有任何自定义。

Answer 3

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

copy: {
      fonts: {
        src: 'fonts/*',
        dest: 'dist/',
      },
...