angularjs - 在 yeoman/angular grunt build 中未更新对字体(font-awesome)资源的引用

标签 angularjs gruntjs font-awesome bower bootstrap-sass

我知道关于这个的 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

  • 任何提示我如何解决这个问题?

    最佳答案

    终于,我想通了:)

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

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

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

    关于angularjs - 在 yeoman/angular grunt build 中未更新对字体(font-awesome)资源的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23893778/

    相关文章:

    html - angularjs 路由 - 跳转到路由链接上的特定页面部分

    angularjs ngHide与ngShow延迟

    laravel-5 - Laravel 5.7 + Font Awesome

    css - 如何增加里面有文字的超赞字体图标大小(使用 fa-stack)

    javascript - 只有一个应用程序在 DOM 中工作

    AngularJS 在执行指令之前等待项目的最后一次加载

    javascript - RrequireJS优化器以及优化后加载动态路径

    ruby - 无法使用 Bootstrap 4 Alpha 2 在 grunt dist 上加载 grunt/sauce_browsers.yml

    javascript - 从远程 Gruntfile.js 加载 grunt 任务

    font-awesome - 字体图标在 font-awesome 中显示为 "fl"