Gruntwiredep 没有注入 font-awesome答案

【问题标题】：Grunt wiredep not injecting font-awesomeGruntwiredep 没有注入 font-awesome
【发布时间】：2026-01-30 19:25:01
【问题描述】：

我目前正在处理一个已经使用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 -->

【问题讨论】：

标签： javascript bower font-awesome grunt-wiredep

【解决方案1】：

latest(4.4.0) commit to FontAwesome 解决了这个问题。

修复非常简单。你需要设置一个覆盖（或者可能使用更少，但我不打算介绍）。

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

【讨论】：

谢谢。使用此信息，我现在回滚到 4.3。似乎更容易。

【解决方案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"
    ]
    }
 }

}

【讨论】：

我试过这个，但不幸的是它没有用。我真的很想知道这是否是 font-awesome 的一个已知问题。
我很确定这里的问题是他使用的是font-awesome而不是fontawesome。检查你 bower.json font-awesom.min.css 是文件名，但项目可以命名。只需运行bower search font-awesome
同样的修复也适用于issue with bootstrap

【解决方案3】：

bower install components-font-awesome --save

应该修复它。
它在他们的 Github 页面上的 Package Managers here

下被提及

【讨论】：

刚刚注意到这解决了使用“grunt serve”进行开发的问题，但“grunt build”仍然会丢失字体文件夹中的字体，因为您需要在 Gruntfile.js 中添加条目要复制字体，只需模仿 boostrap 字体就可以了。

【解决方案4】：

似乎凉亭组件“font-awesome”有一些问题。您可以尝试在 bower.json 中改用“components-font-awesome”，它将解决未正确注入 css 文件的问题。你可以在这里查看它的 Github repo：https://github.com/components/font-awesome

【讨论】：