引用字体不更新自耕农/角咕噜版本（字体真棒）资源 [英] References to font (font-awesome) resources are not updated in yeoman/angular grunt build

问题描述

我知道这个的SO线程（我下面链接它们），但不幸的是我不能与他们解决这个问题，所以请允许我这样一个问题： - ）

我用的自举一个约曼项目AngularJS，因此依靠利用bower.js和SCSS一个grunt.js版本。
我想用字体真棒和引导，从 - 萨斯官方glyphicons-半身正规。
当运行咕噜伺候一切都很好，但是当我想创建分布的文件集，字体文件的引用没有更新，因为他们应该。

该main.scss包含

  $图标字体路径：../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/
@import引导 - 萨斯官方/供应商/资产/样式表/引导;$ FA-字体路径：../bower_components/font-awesome/fonts/
@importFONT-真棒/ SCSS / FONT-真棒;
 

但在dist /风格/ 123456.main.css结局都像

引用<$p$p><$c$c>@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复制和转任务拨弄但还没有找到合适的触发拉，但：（

主题和其他来源我曾经找到了一个解决方案：

• Fontawesome不工作时，项目是建立与咕噜


• Assets在角缺少应用使用咕噜
建

• Font在真棒的main.css不URL $ C $光盘咕噜DIST


• http://likesalmon.net/use-font-awesome -on-自耕农-angularjs项目/


• https://github.com/yeoman/generator-angular/issues/350

任何提示我怎么能takle呢？

解决方案

最后，我想通了：）

我牵制cssmin要在这场比赛中的坏人：这是负责撰写的.tmp路径进入决赛的CSS文件。为了解决这个问题，我添加了 noRebase：真，选项可以在Gruntfile.js的cssmin任务。

要使用的字体引用相处，我还使用了副本任务的字体复制到我的DIST文件夹，并不得不使用 $图标字体路径：../字体/有它终于在正确的格式。

也许这将帮助别人卡住了类似的情况： - ）

I'm aware of the SO threads about this (I've linked them below), but unfortunately I couldn't solve this with them, so please allow me this question :-)

I've bootstrapped an AngularJS project with Yeoman and thus rely on a grunt.js build utilizing bower.js and SCSS. I want to use font-awesome and the glyphicons-halflings-regular from bootstrap-sass-official. When running "grunt serve" everything is fine, but when I want to create a fileset for distribution, the references to the font files are not updated as they should.

The main.scss contains

$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";

but the outcome in the dist/styles/123456.main.css are references like

@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);

So, to me it looks like the path is updated (to the tmp path) but not with the right value for "dist". I tried to fiddle with the copy and rev tasks in the gruntfile but haven't found the right trigger to pull, yet :(

Threads and other sources I used to find a solution for this:

• 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

Any hints how I could takle this?

解决方案

Finally, I figured it out :)

I pinned down cssmin to be the bad guy in this game: It was responsible for writing the .tmp paths into the final css file. To solve this, I added the noRebase: true, option to the cssmin task in Gruntfile.js .

To get along with the font references, I also used the copy task to copy the fonts into my dist folder and had to use $icon-font-path: "../fonts/" to have it finally in the right format.

Maybe this will help someone stuck in a similar situation :-)

这篇关于引用字体不更新自耕农/角咕噜版本（字体真棒）资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！