Why doesn't grunt-bower-task work with font-awesome out the box

[PerfectCarl]

Hello

I installed the font-awesome via bower install fontawesome --save and have a grunt-bower-task defined to cpy bower deps to my build/ folder.

    bower: {
      install: {
        options: {
          targetDir: './build/vendor'
        }
      }
    },

While font-awesome is properly copied in bower_components

├── bower.json
├── css
│   ├── font-awesome.css
│   ├── font-awesome.css.map
│   └── font-awesome.min.css
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── less
│   ├── animated.less
│   ├── bordered-pulled.less
│   ├── core.less
│   ├── fixed-width.less
│   ├── font-awesome.less
│   ├── icons.less
│   ├── larger.less
│   ├── list.less
│   ├── mixins.less
│   ├── path.less
│   ├── rotated-flipped.less
│   ├── stacked.less
│   └── variables.less
└── scss
    ├── _animated.scss
    ├── _bordered-pulled.scss
    ├── _core.scss
    ├── _fixed-width.scss
    ├── font-awesome.scss
    ├── _icons.scss
    ├── _larger.scss
    ├── _list.scss
    ├── _mixins.scss
    ├── _path.scss
    ├── _rotated-flipped.scss
    ├── _stacked.scss
    └── _variables.scss

The file hierarchy got flattened when copied to my build/vendor/ folder:

├── font-awesome.css
├── FontAwesome.otf
├── fontawesome-webfont.eot
├── fontawesome-webfont.svg
├── fontawesome-webfont.ttf
├── fontawesome-webfont.woff
└── fontawesome-webfont.woff2

In the case of font-awesome, this prevents the font to load as the file structure is referenced in the asset files.

I've read that the output hierarchy can we override with exportsOverride.
I'm just curious why this is even necessary: being new to bower it sounds that there is something that I don't understand about bower/grunt-bower-task.

Could you shed some light on this question?

[PerfectCarl]

Is this related to #21 ?

[ngm]

Just for anyone else coming across this, the following exportsOverride in bower.json should get font-awesome to work.

 "exportsOverride": {
    "font-awesome": {
      "fonts": "fonts/*",
      "css": "css/font-awesome.css"
    }
  }

As @PerfectCarl says though, it seems like it would make more sense for grunt-bower-task to maintain file hierarchy by default?

[alpha3media]

Hi,
I am using the version 4.1.0 of font-awesome and I have found two ways to fix it.

1. Add "css/font-awesome.css" in your main list within your bower.json font-awesome directory. This solution was not good when there are people working in the same project with their own environment.

{
    "name": "font-awesome",
    "description": "Font Awesome",
    "keywords": [],
    "homepage": "http://fontawesome.io",
    "dependencies": {},
    "devDependencies": {},
    "license": [
        "OFL-1.1",
        "MIT",
        "CC-BY-3.0"
    ],
    "main": [
        "less/font-awesome.less",
        "scss/font-awesome.scss",
        "css/font-awesome.css",
    ],
    "ignore": [
        "*/.*",
        "*.json",
        "src",
        "*.yml",
        "Gemfile",
        "Gemfile.lock",
        "*.md"
    ]
}

1. In your main bower,json add the following section after your dependencies section.

"dependencies": {
    ...
},
"overrides": {
    "font-awesome": {
        "note": "In font-awesome bower.json does not contains css value in its main list. The lack of this library oblige to overide it.",
        "main": "css/font-awesome.css"
    }
}