NPM Fontawesome Angular 4编译错误

Question

我正在使用Angular CLI，并试图使字体很棒在我的项目中工作。

我已经使用npm install font-awesome --save

安装了字体

我试图用

导入库

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

在我的styles.scss

的顶部

但是运行ng-serve时，我会得到以下编译错误

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

有人有类似的问题吗？我试图不弄乱angular-cli.son，如果我可以帮助它。

Answer 1

我遇到了相同的问题，经过大量搜索，我在https://github.com/angular/angular/angular/angular/angular/angular-cli/issues

上找到了答案。

更改@Import" 〜font-awesome/scss/font-awesome";

进入：

@import" 〜font-awesome/scss/font-awesome.scs";

这是SASS WebPack插件问题的临时解决方法，应尽快修复。

希望这个解决方法能够为您做

Answer 2

您需要将font.css导入到您的angular-cli.json

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

现在您可以在应用程序中使用字体很棒的类

// in html
<i class="fa fa-close"></i>
// or within your styles
.some-class:before{
    font-family: FontAwesome;
    content: "F00D"
}

Angular-Cli.json是您的朋友。在您的Angular-cli中导入字体库。JSON将使您的应用程序的未来开发人员知道在哪里可以轻松查找应用程序的样式依赖性。