Postcss warnings with ~ font paths relative to node_modules after upgrading from 1.5.0 to 1.6.0

Versions

Angular CLI: 1.6.0
Node: 8.7.0
OS: darwin x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.5.3
webpack: 3.10.0

Repro steps

In order to load font-awesome fonts, I am using the method described in #1463. In styles.css, I have added:

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

Observed behavior

Since upgrading to angular-cli 1.6.0 I am getting warnings from postcss-url that the font files used by font-awesome cannot be found:

WARNING in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: /Users/myuser/workspace/my-frontend-ng/src/styles.scss:10:3: Can't read file '/Users/myuser/workspace/my-frontend-ng/src/~font-awesome/fonts/fontawesome-webfont.eot', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: /Users/myuser/workspace/my-frontend-ng/src/styles.scss:10:3: Can't read file '/Users/myuser/workspace/my-frontend-ng/src/~font-awesome/fonts/fontawesome-webfont.eot', ignoring
    at Object.emitWarning (/Users/myuser/workspace/my-frontend-ng/node_modules/webpack/lib/NormalModule.js:117:16)
    at result.warnings.forEach (/Users/myuser/workspace/my-frontend-ng/node_modules/postcss-loader/lib/index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (/Users/myuser/workspace/my-frontend-ng/node_modules/postcss-loader/lib/index.js:149:27)
    at <anonymous>
 @ ./src/styles.scss 4:14-191
 @ multi ./src/styles.scss

I am getting this error for all 4 types of fonts that font-awesome uses (.eot/.ttf/.woff/woff2).

I assume this is postcss trying to inline etc. and then not finding the files due to the ~ in the path. From what I can see, postcss-url not finding the files does not seem to affect the build result, they get required and loaded just fine.

Desired behavior

No warnings :)

[joostme]

We also had this warning when upgrading to Angular CLI 1.6.0 today.

A workaround we found is making the path include node_modules because it tries to resolve the path relative to the src folder

So this
$fa-font-path: "~font-awesome/font";

becomes this

$fa-font-path: "../node_modules/font-awesome/font";

[clydin]

The use of the tilde is webpack specific and while this should work for the foreseeable future, it may not always. The suggested change provided by @jozlnr may therefore be prudent.

[paesku]

Moving the files to your .angular-cli.json styles property might be the better solution.

[GeorgeKnap]

I can confirm the relative paths works. All warnings are gone.

What puzzles me though is the angular CLI recognizes src/styles as a some kind of root path thus no matter where I use the import the relative path to node modules looks like ../../node_modules/.
Not sure where CLI got the src/styles root. I'm not setting that anywhere.

[clydin]

With the way the sass-loader and webpack work, the top level (referenced in .angular-cli.json) file's containing directory becomes the path for all the imported files and the base for any relative resources.

So what @paesku recommended would work in this situation and would definitely be a cleaner option here as the font path wouldn't need to be set. However, if any other scss variables needed to be set before the import than that wouldn't be an option.

[sinedied]

@jozlnr @clydin The workaround works only for simpler cases: as you changes to a relative path, if the file containing the variable definition is imported elsewhere in the project, it breaks with errors.

In my case it's defined in theme/theme-variables.scss with other variables, and imported in components like app/home/home.scss and thus breaks the build because for some reason it tries to resolve the path from the file path making the import.

Like this:

ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-bold.ttf' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell':
Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-bold.ttf' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell'
Module not found: Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-bold.woff' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell':
Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-bold.woff' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell'
Module not found: Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-regular.ttf' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell':
Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-regular.ttf' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell'
Module not found: Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-regular.woff' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell':
Error: Can't resolve '../node_modules/ionic-angular/fonts/noto-sans-regular.woff' in '/Users/noda/github/ngx-starter-kit/src/app/core/shell'
...

If you have ideas...

[Bidthedog]

I received this today too. Downgraded to cli 1.5.5 and updated my package.json, which sorted the problem. I have a vast selection of scss files using includes and paths using ~, so using relative paths causes me more problems - doesn't seem to solve the issues for me either way.

Won't be upgrading until these warnings go away - can't discern real errors / warnings from this nonsense.

[emazv72]

The workaround suggested by @jozlnr doesn't seem to work in more complex scenarios like a main styles.scss setting variables and importing bootstrap-sass.

[yogeshgadge]

Still broken in 1.6.3 ...here is where it is reproduced
https://github.com/yogeshgadge/demo-app2

Steps to reproduce:
npm install
Just do npm run build with version 1.6.3