References to font (font-awesome) resources are not updated in yeoman/angular grunt build
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?
Answer
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 :-)