Question

我知道有关此问题的SO主题（我已将它们链接到下方），但不幸的是我无法用它们解决这个问题，所以请允许我这个问题： - ）

我已经与Yeoman一起引导了一个AngularJS项目，因此依赖于使用bower.js和SCSS的grunt.js构建。我想从bootstrap-sass-official使用font-awesome和glyphicons-halflings-regular。当跑步＆＃34;咕噜声＆＃34;一切都很好，但是当我想创建一个文件集进行分发时，对字体文件的引用不会按原样更新。

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路径）但没有正确的值＃34; dist＆＃34;。我试图摆弄gruntfile中的copy和rev任务，但还没找到合适的触发器，但是：（

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

任何提示我如何才能接受这个？

Answer 1

最后，我想出来了：）

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

为了配合字体引用，我还使用了复制任务将字体复制到我的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的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 %>'
    }]

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

Answer 3

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

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

在yeoman / angular grunt构建中不会更新对font（font-awesome）资源的引用

3 个答案: