CLI 7.0.0-rc.1 SCSS Build Error with Relative src: url('../') Paths

[dharders]

Bug Report or Feature Request (mark with an x)

- [x] bug report

Command (mark with an x)

- [x] build
- [x] serve

Versions

node --version v10.9.0
yarn -v 1.9.4
Angular CLI: 7.0.0-rc.1
Node: 10.9.0
OS: win32 x64
Angular: 7.0.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.9.0-rc.1
@angular-devkit/build-angular 0.9.0-rc.1
@angular-devkit/build-optimizer 0.9.0-rc.1
@angular-devkit/build-webpack 0.9.0-rc.1
@angular-devkit/core 7.0.0-rc.1
@angular-devkit/schematics 7.0.0-rc.1
@angular/cdk 7.0.0-beta.2
@angular/cli 7.0.0-rc.1
@angular/material 7.0.0-beta.2
@ngtools/webpack 7.0.0-rc.1
@schematics/angular 7.0.0-rc.1
@schematics/update 0.9.0-rc.1
rxjs 6.3.3
typescript 3.1.1
webpack 4.19.1

Repro steps

yarn global add @angular/cli@latest (7.0.0-rc.1)
ng new testSCSS (no routing, SCSS styling)
cd testSCSS
yarn add font-awesome
'src/styles.scss': Add @import "~font-awesome/css/font-awesome.css";
ng serve

Build should FAIL

The log given by the failure

Failed to compile.

./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\source\testSCSS\node_modules\font-awesome\css\font-awesome.css:10:13: Can't resolve '../fonts/fontawesome-webfont.eot' in 'C:\source\testSCSS\src'

8 | font-family: 'FontAwesome';
9 | src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
| ^
11 | font-weight: normal;
12 | font-style: normal;

Desired functionality

Build successfully. Version 6 worked fine this way.

Mention any other details that might be useful

I also tried @import "font-awesome/css/font-awesome.css"; in styles.scss (i.e. without the ~) but same error. The error output appears to look for the fonts in the src directory, where they are in node_modules (i.e. v6 behaviour)

[dharders]

Seems to be an issue with the SCSS plugin resolver.

If I manually change all src: url() references in the source of font-awesome.css in node_modules from:

src: url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')

to

src: url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')

it works!

However, changing third-party sources isn't a fix in my opinion, but at least explains what the error is.

[clydin]

Please review the font-awesome CLI guide for details on methods to include font awesome within a project: https://github.com/angular/angular-cli/wiki/stories-include-font-awesome

[dharders]

Thanks @clydin for the link! I didn't know about that guide. One quick note, I had to modify the file path slightly from the guide, as it was pointing to a directory one level back too far and caused a build error.

i.e. I had to modify angular.json example from the guide:

From

"styles": [
              "../node_modules/font-awesome/css/font-awesome.css",
              "src/styles.scss"
            ],

to

"styles": [
              "node_modules/font-awesome/css/font-awesome.css",
              "src/styles.scss"
            ],

With this change I could remove my @import's from styles.scss and it would work with CLI 7.0.0-rc.1. I will use this method in the future, but I think the other method should still work as expected. Looks like @alan-agius4 is on to it with #12437 so looking good.

Thanks heaps guys!