References to font (font-awesome) resources are not updated in yeoman/angular grunt build

Question

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 bootst

Answer 1

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

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.