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

Created on 14 Jul 2017  路  3Comments  路  Source: angular/angular-cli

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: - [X] 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",
}
}

Most helpful comment

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

All 3 comments

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

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

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

donaldallen picture donaldallen  路  3Comments

JanStureNielsen picture JanStureNielsen  路  3Comments

brtnshrdr picture brtnshrdr  路  3Comments

rwillmer picture rwillmer  路  3Comments

delasteve picture delasteve  路  3Comments