在生产中构建时将 Font-Awesome 添加到 Angular-Cli 项目答案

【问题标题】：Add Font-Awesome to Angular-Cli project when build in production在生产中构建时将 Font-Awesome 添加到 Angular-Cli 项目
【发布时间】：2018-04-29 21:01:03
【问题描述】：

我已按照 Angular-Cli 文档中说明的步骤将 Font-Awesome 包含到我的项目 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-font-awesome.md

所以我在我的angular-cli.json 中有这个：

"styles": [
            "../node_modules/boosted/dist/css/boosted.min.css",
            "../node_modules/boosted/dist/css/orangeIcons.min.css",
            "../node_modules/font-awesome/css/font-awesome.min.css",
            "styles.css"
],

当做ng serve 并在localhost:4200 上看到我的项目时，一切正常。

不幸的是，在做ng build --prod的时候，它会生成dist文件夹，包括font-awesome文件：

我还验证了字体是否已添加到我的样式中。[...].bundle.css 确实如此：

然后，当部署在服务器（Apache Tomcat 8.5）上时，不会显示字体很棒的图标。

顺便说一句，我不使用 SASS。

这是我的 Angular 配置/版本：

@angular/cli: 1.4.3
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

那么，我能做些什么来完成这项工作？

【问题讨论】：

请检查您的 package.json 文件，您的 font-awesome npm 包安装在“devdependencies”中，如果是，请将其更改为“dependencies”
@Srini 它已经在“依赖项”中......我已经在下面回答了我自己的问题^^

标签： css angular webpack angular-cli font-awesome

【解决方案1】：

好的，所以我看到有人对此说了些什么，但我当时没有尝试。我的解决方案是将"../node_modules/font-awesome/css/font-awesome.min.css" 放在angular-cli.json 中的其他样式文件上方。

似乎其他.css文件覆盖了字体真棒样式，但在那种情况下，我不明白为什么在开发模式下会出现任何问题。

所以，我在angular-cli.json 中的样式现在看起来像这样：

"styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/boosted/dist/css/boosted.min.css",
        "../node_modules/boosted/dist/css/orangeIcons.min.css",
        "styles.css"
],

【讨论】：

【解决方案2】：

试试这个：

ng build --env=prod --output-hashing none

【讨论】：

你能详细说明一下吗