4

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:

Any hints how I could takle this?

Community
  • 1
  • 1
Markus
  • 610
  • 1
  • 9
  • 23

3 Answers3

8

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 :-)

Markus
  • 610
  • 1
  • 9
  • 23
  • Thanks, i spend all the day looking the solution, I did not know the parameter noRebase... – TlonXP Jul 10 '14 at 04:20
  • @Markus - This did help me get around it, but it also broke imagemin and image name revving (because paths won't be replace in css anymore). So I ended up having to go without image revving for now in order for fonts to work. There must be a better way to do it, but a better way I could not find. – gregtzar Jul 11 '14 at 01:01
  • Looks like the cssmin option has changed recently - it's now `rebase: false` – Hayden Ball Mar 12 '15 at 10:57
8

Here's my solution. I don't mess with the font-awesome scss at all. So all I need is a way to treat font-awesome similar to bootstrap, add css or js and then done with it.

If you open bower.json for under your yoeman build folder, you can change the overrides section to the following,

"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"
  ]
}

}

once you do that, your font-awesome.css will show up in index.html build section like

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

Of course, this assume that you won't mess up with scss, therefore you can delete the build section inside main.scss, used to be

// bower:scss
@import "bower_components/font-awesome/scss/font-awesome.scss";
// endbower

After you done that, your grunt serve should work right away. In order to get grunt build work, you just need to keep the relationship between fonts folder and css folder of fontawesome, which means copy the fonts to /fonts, the grunt file will look like, 

    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }, {
      expand: true,
      cwd: 'bower_components/font-awesome/',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]

In short, I treated fontawesome same as bootstrap without any customization.

windmaomao
  • 7,120
  • 2
  • 32
  • 36
1

I have not run into this problem probably because I use relative path to my font files and the same path works without modifications when I build a dist. I just have one copy task that does:

copy: {
      fonts: {
        src: 'fonts/*',
        dest: 'dist/',
      },
...
Lachezar
  • 6,523
  • 3
  • 33
  • 34
  • This way you don't seem to use the bower modules for font-awesome at all, right? ;-) This is reasonable, but I'm tring to get the whole toolchain run as smoothly as possible to be prepared if we want/need to pull in other modules ;-) – Markus May 28 '14 at 09:06