npm FontAwesome Angular 4 kompilieren Fehler

Question

Ich benutze Angular CLI und versuche, Font Awesome arbeiten in meinem Projekt.

I Font installiert haben Ehrfürchtig mit npm install font-awesome --save

habe ich versucht, die Bibliothek mit

$fa-font-path: "~font-awesome/fonts"; 
@import "~font-awesome/scss/font-awesome"; 

an der Spitze meiner styles.scss

zu importieren, aber wenn ng-serve läuft erhalte ich die kompilieren folgende Fehler

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./src/css/styles.css 
Module not found: Error: Can't resolve '../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0' in '/Users/MyName/Documents/Workspace/my-app/src/css' 
@ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./src/css/styles.css 6:181980-182057 
@ ./src/css/styles.css 
@ multi ./src/css/styles.css 

Hat jemand ähnliche Probleme gehabt? Ich versuche nicht mit der angular-cli.son zu tun, wenn ich es helfen kann.

Answer 1

Sie müssen die font.css in die Winkel cli.json

{ 
    "apps": [ 
     { 
      "styles": [ 
       "../nodes_modules/font-awesome/css/font-awesome.min.css" 
      ] 
     } 
    ] 
} 

jetzt importieren Sie die Schrift ehrfürchtige Klassen in Ihrer App verwenden können

// in html 
<i class="fa fa-close"></i> 

// or within your styles 
.some-class:before{ 
    font-family: FontAwesome; 
    content: "\F00D" 
} 

Der Winkel cli.json ist dein Freund. Wenn Sie die Schriftbibliothek in Ihrem angular-cli.json importieren, können zukünftige Entwickler Ihrer App wissen, wo sie suchen müssen und welche Stilabhängigkeiten die Anwendung hat.

Answer 2

hatte ich das gleiche Problem und nach vieler Suche fand ich eine Antwort auf https://github.com/angular/angular-cli/issues

ändern @import "~ font-ehrfürchtige/SCSS/font-awesome";

In:

@import "~ font-ehrfürchtiges/SCSS/font-awesome.scss";

Dies ist eine vorübergehende Lösung für ein Problem mit dem Sass Webpack Plugin und sollte bald behoben werden.

Hoffentlich wird diese Problemumgehung es für Sie tun