diff --git a/package-lock.json b/package-lock.json
index 7c78442c6a03..9de6fd647837 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6664,12 +6664,12 @@
       }
     },
     "postcss-loader": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.8.tgz",
-      "integrity": "sha512-KtXBiQ/r/WYW8LxTSJK7h8wLqvCMSub/BqmRnud/Mu8RzwflW9cmXxwsMwbn15TNv287Hcufdb3ZSs7xHKnG8Q==",
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.10.tgz",
+      "integrity": "sha512-xQaDcEgJ/2JqFY18zpFkik8vyYs7oS5ZRbrjvDqkP97k2wYWfPT4+qA0m4o3pTSCsz0u26PNqs8ZO9FRUWAqrA==",
       "requires": {
         "loader-utils": "1.1.0",
-        "postcss": "6.0.14",
+        "postcss": "6.0.15",
         "postcss-load-config": "1.2.0",
         "schema-utils": "0.3.0"
       },
@@ -6690,6 +6690,16 @@
             "ansi-styles": "3.2.0",
             "escape-string-regexp": "1.0.5",
             "supports-color": "4.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "4.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+              "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+              "requires": {
+                "has-flag": "2.0.0"
+              }
+            }
           }
         },
         "has-flag": {
@@ -6698,13 +6708,13 @@
           "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
         },
         "postcss": {
-          "version": "6.0.14",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-          "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+          "version": "6.0.15",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.15.tgz",
+          "integrity": "sha512-v/SpyMzLbtkmh45zUdaqLAaqXqzPdSrw8p4cQVO0/w6YiYfpj4k+Wkzhn68qk9br+H+0qfddhdPEVnbmBPfXVQ==",
           "requires": {
             "chalk": "2.3.0",
             "source-map": "0.6.1",
-            "supports-color": "4.5.0"
+            "supports-color": "5.1.0"
           }
         },
         "source-map": {
@@ -6713,9 +6723,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+          "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
           "requires": {
             "has-flag": "2.0.0"
           }
diff --git a/package.json b/package.json
index 517f55555c3f..f351f5760750 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
     "postcss-custom-properties": "^6.1.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",
     "resolve": "^1.1.7",
diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index de830c0187f2..58cdff7cbe08 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -29,6 +29,12 @@ const customProperties = require('postcss-custom-properties');
  * require('sass-loader')
  */
 
+interface PostcssUrlAsset {
+  url: string;
+  hash: string;
+  absolutePath: string;
+}
+
 export function getStylesConfig(wco: WebpackConfigOptions) {
   const { projectRoot, buildOptions, appConfig } = wco;
 
@@ -44,17 +50,20 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const baseHref = wco.buildOptions.baseHref || '';
   const deployUrl = wco.buildOptions.deployUrl || '';
 
-  const postcssPluginCreator = function() {
+  const postcssPluginCreator = function(loader: webpack.loader.LoaderContext) {
     return [
       postcssUrl({
-        filter: ({ url }: { url: string }) => url.startsWith('~'),
-        url: ({ url }: { url: string }) => path.join(projectRoot, 'node_modules', url.substr(1)),
+        filter: ({ url }: PostcssUrlAsset) => url.startsWith('~'),
+        url: ({ url }: PostcssUrlAsset) => {
+          const fullPath = path.join(projectRoot, 'node_modules', url.substr(1));
+          return path.relative(loader.context, fullPath).replace(/\\/g, '/');
+        }
       }),
       postcssUrl([
         {
           // Only convert root relative URLs, which CSS-Loader won't process into require().
-          filter: ({ url }: { url: string }) => url.startsWith('/') && !url.startsWith('//'),
-          url: ({ url }: { url: string }) => {
+          filter: ({ url }: PostcssUrlAsset) => url.startsWith('/') && !url.startsWith('//'),
+          url: ({ url }: PostcssUrlAsset) => {
             if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
               // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
               return `${deployUrl.replace(/\/$/, '')}${url}`;
@@ -71,7 +80,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         },
         {
           // TODO: inline .cur if not supporting IE (use browserslist to check)
-          filter: (asset: any) => !asset.hash && !asset.absolutePath.endsWith('.cur'),
+          filter: (asset: PostcssUrlAsset) => !asset.hash && !asset.absolutePath.endsWith('.cur'),
           url: 'inline',
           // NOTE: maxSize is in KB
           maxSize: 10
diff --git a/packages/@angular/cli/package.json b/packages/@angular/cli/package.json
index 07074bce7a12..70cb694eac85 100644
--- a/packages/@angular/cli/package.json
+++ b/packages/@angular/cli/package.json
@@ -61,7 +61,7 @@
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
     "postcss-custom-properties": "^6.1.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",
     "resolve": "^1.1.7",
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'); }