[ERROR] Sass: *.woff?v=4.7.0 module not found (font-awesome v4.7.0)

[pderiy]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.2.1
node: 8.1.3
os: linux x64
@angular/animations: 4.2.6
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/core: 4.2.6
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.2.1
@angular/compiler-cli: 4.2.6
@angular/language-service: 4.2.6

Current behavior

Errors on compile...

Minimal reproduction of the problem with instructions

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:325-376
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:399-442
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:502-555
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff?v=4.7.0' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:588-640
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.ttf?v=4.7.0' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:672-723
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in '/media/storage/Desktop/www/naturell/src/sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss 6:759-810
 @ ./src/sass/styles.scss
 @ multi ./src/sass/styles.scss

Expected behavior

It should just compile font-awesome using SCSS
style.scss

@import "~font-awesome/scss/font-awesome";

What is the motivation / use case for changing the behavior?

Browser:

• Chrome (desktop) version 59.0
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

For Tooling issues:

• Node version: 8.1.3
• Platform: Ubuntu 17.04

Others:

.angular-cli.json

{
"defaults": {
    "styleExt": "scss",
}
}

[clydin]

Please see this guide outlining integration steps: https://github.com/angular/angular-cli/wiki/stories-include-font-awesome

[pderiy]

@clydin Okay, now I understand this error.
Big much thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}