diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index de830c0187f2..ebd4d9ff2534 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -48,7 +48,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     return [
       postcssUrl({
         filter: ({ url }: { url: string }) => url.startsWith('~'),
-        url: ({ url }: { url: string }) => path.join(projectRoot, 'node_modules', url.substr(1)),
+        url: ({ url }: { url: string }, { file }: { file: string }) => {
+          const relativePathToRoot = path.relative(file, projectRoot);
+          return path.join(relativePathToRoot, 'node_modules', url.substr(1))
+            // Ensure that, on Windows, the path doesn't contain back slashes to
+            // be PostCSS friendly :)
+            .replace(/\\/g, '/');
+        },
       }),
       postcssUrl([
         {
diff --git a/tests/e2e/tests/build/styles/inline-urls.ts b/tests/e2e/tests/build/styles/inline-urls.ts
index 310ca9ab53c2..7ba0936832d1 100644
--- a/tests/e2e/tests/build/styles/inline-urls.ts
+++ b/tests/e2e/tests/build/styles/inline-urls.ts
@@ -20,7 +20,7 @@ export default function () {
     .then(() => silentNpm('install', 'font-awesome@4.7.0'))
     .then(() => writeMultipleFiles({
       'src/styles.scss': `
-        $fa-font-path: "~font-awesome/font";
+        $fa-font-path: "~font-awesome/fonts";
         @import "~font-awesome/scss/font-awesome";
         h1 { background: url('./assets/large.png'); }
         h2 { background: url('./assets/small.svg'); }