在yeoman/angular grunt构建中不会更新对font(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任务,但还没找到合适的触发器,但是:(

我用过的线程和其他来源为此找到了解决方案:

• 当项目使用grunt构建时,Fontawesome无法正常工作
• 使用grunt构建的Angular应用程序中缺少资产
• 字体真棒URL未在main.css中为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文件.为了解决这个问题,我noRebase: true,在Gruntfile.js中添加了cssmin任务的选项.

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

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

Answer 2

这是我的解决方案.我根本没有弄乱字体 - 令人敬畏的scss.所以我需要的是一种处理类似于bootstrap的字体的方法,添加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中的构建部分,以前是

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

完成后,你grunt serve应该马上工作.为了得到grunt build工作,你只需要保持字体文件夹和fontawesome的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 %>'
    }]

简而言之,我没有任何自定义处理与bootstrap相同的fontawesome.