我知道关于这个的 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 任务,但还没有找到正确的触发器来拉动,但:(
我曾经为此找到解决方案的线程和其他来源:
任何提示我如何解决这个问题?
最佳答案
终于,我想通了:)
我认为 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/