css - 在生产中构建时将 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 文件覆盖了 font-awesome 样式，但在那种情况下，我不明白为什么在开发模式下出现任何错误。

所以，我在 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"
],