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";

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