Grunt wiredep无法注入font-awesome。

Question

我目前正在处理一个已经使用yeoman开始的项目。

出于某些原因，当我运行grunt-wiredep时，所有依赖项都会正确注入到我的index.html中，除了font-awesome。

这是我的bower.json文件：

{
  "name": "watermelon",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-bootstrap": "~0.13.3",
    "angular-cookies": "^1.3.0",
    "angular-google-maps-native": "~2.0.0",
    "angular-mocks": "~1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-scenario": "~1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "^3.2.0",
    "bootstrap-switch": "~3.3.2",
    "eonasdan-bootstrap-datetimepicker": "~4.15.35",
    "es5-shim": "^4.0.0",
    "font-awesome": "~4.4.0",
    "json3": "^3.3.0",
    "moment": "~2.10.6",
    "ng-tags-input": "3.0.0",
    "requirejs": "latest",
    "requirejs-domready": "latest",
    "stacktrace-js": "~0.6.4",
    "underscore": "~1.8.3"
  },
  "appPath": "."
}

以下是链接到 Gruntfile.js 的链接：http://pastebin.com/xxZwAYRW

当我运行 grunt-wiredep 时，只有这些css依赖项被注入：

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" />
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" />
<!-- endbower -->

- Tiago

Answer 1

这个问题出现在最新的(4.4.0)FontAwesome提交中 。。

修复方法非常简单。您需要设置一个覆盖(或者可能使用less，但我不会涉及那个)。

{
  "name": "myProject",
  "version": "0.0.0",
  "dependencies": {
    "font-awesome": ">=4.4.0",
  },  
  "overrides":{
    "font-awesome": {
    "main": [
        "css/font-awesome.css"
    ]
    }
  }
}

OR （因为fontawesome / font-awesome两个名称都已注册）

{
  "name": "myProject",
  "version": "0.0.0",
  "dependencies": {
    "fontawesome": ">=4.4.0",
  },  
  "overrides":{
    "fontawesome": {
    "main": [
        "css/font-awesome.css"
    ]
    }
  }
}

- TMB

---

谢谢。有了这些信息，我现在回滚到了版本4.3。看起来更容易一些。 - Steve

Answer 2

您可以通过覆盖 bower 模块来实现此操作。尝试使用下面这段代码编辑您的 bower.json 文件，在代码底部查找更改内容...希望它能起作用。

{
  "name": "watermelon",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-bootstrap": "~0.13.3",
    "angular-cookies": "^1.3.0",
    "angular-google-maps-native": "~2.0.0",
    "angular-mocks": "~1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-scenario": "~1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "^3.2.0",
    "bootstrap-switch": "~3.3.2",
    "eonasdan-bootstrap-datetimepicker": "~4.15.35",
    "es5-shim": "^4.0.0",
    "font-awesome": "~4.4.0",
    "json3": "^3.3.0",
    "moment": "~2.10.6",
    "ng-tags-input": "3.0.0",
    "requirejs": "latest",
    "requirejs-domready": "latest",
    "stacktrace-js": "~0.6.4",
    "underscore": "~1.8.3"
  },  

"overrides":{
    "font-awesome": {
    "main": [
        "css/font-awesome.min.css"
    ]
    }
 }

}

- Jyoti Pathania

---

我尝试了这个，但不幸的是它没有起作用。我真的很想知道这是否是font-awesome已知的问题。 - Tiago

我非常确定这里的问题是他正在使用 font-awesome 而不是 fontawesome。请检查您的 bower.json 文件，font-awesom.min.css 是文件名，但项目名称可以是任何名称。只需运行 bower search font-awesome 即可。 - TMB

这个修复方法也适用于Bootstrap的问题。 - Hashbrown

Answer 3

bower install components-font-awesome --save

应该修复它。
在他们的Github页面下的包管理器下面有提到，这里

- Vandesh

---

刚刚注意到这个修复方案可以解决使用“grunt serve”进行开发时的问题，但是“grunt build”仍然无法在字体文件夹中找到字体，因此您需要在Gruntfile.js中添加条目以复制字体，只需模仿boostrap字体即可。然后就可以解决问题了。 - groo

Answer 4

似乎 bower 组件 "font-awesome" 存在一些问题。您可以尝试在您的 bower.json 中使用 "components-font-awesome" 代替，这将解决未正确注入 css 文件的问题。您可以在其 Github 存储库中查看：https://github.com/components/font-awesome

- Jose Fernando Duran