Question

我正在使用Angular CLI并尝试让Font Awesome在我的项目中工作。

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

安装了Font Awesome

我尝试使用

导入库

$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-cli/issues

找到了答案

更改 @import＆＃34; ~font-awesome / scss / font-awesome＆＃34 ;;

进入：

@import＆＃34; ~font-awesome / scss / font-awesome.scss＆＃34 ;;

对于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中导入字体库将使您的应用的未来开发人员知道在哪里可以轻松找到应用程序具有的样式依赖关系。

npm FontAwesome Angular 4编译错误

2 个答案: