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

Question

我按照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

那么，我该怎么做才能使这个工作？

Answer 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"
],

Answer 2

试试这个：

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