diff --git a/package-lock.json b/package-lock.json
index 7e577d42fef5..73e93c2014da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1881,6 +1881,11 @@
         "source-map": "0.5.7"
       }
     },
+    "cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2071,29 +2076,6 @@
         "randombytes": "2.0.5"
       }
     },
-    "directory-encoder": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/directory-encoder/-/directory-encoder-0.7.2.tgz",
-      "integrity": "sha1-WbTiqk8lQi9sY7UntGL14tDdLFg=",
-      "requires": {
-        "fs-extra": "0.23.1",
-        "handlebars": "1.3.0",
-        "img-stats": "0.5.2"
-      },
-      "dependencies": {
-        "fs-extra": {
-          "version": "0.23.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.23.1.tgz",
-          "integrity": "sha1-ZhHbpq3yq43Jxp+rN83fiBgVfj0=",
-          "requires": {
-            "graceful-fs": "4.1.11",
-            "jsonfile": "2.4.0",
-            "path-is-absolute": "1.0.1",
-            "rimraf": "2.6.2"
-          }
-        }
-      }
-    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -4059,43 +4041,6 @@
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ="
     },
-    "handlebars": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-1.3.0.tgz",
-      "integrity": "sha1-npsTCpPjiUkTItl1zz7BgYw3zjQ=",
-      "requires": {
-        "optimist": "0.3.7",
-        "uglify-js": "2.3.6"
-      },
-      "dependencies": {
-        "async": {
-          "version": "0.2.10",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=",
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.1.43",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
-          "optional": true,
-          "requires": {
-            "amdefine": "1.0.1"
-          }
-        },
-        "uglify-js": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-          "integrity": "sha1-+gmEdwtCi3qbKoBY9GNV0U/vIRo=",
-          "optional": true,
-          "requires": {
-            "async": "0.2.10",
-            "optimist": "0.3.7",
-            "source-map": "0.1.43"
-          }
-        }
-      }
-    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -4409,14 +4354,6 @@
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "optional": true
     },
-    "img-stats": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/img-stats/-/img-stats-0.5.2.tgz",
-      "integrity": "sha1-wgNJbELy2esuWrgjL6dWurMsnis=",
-      "requires": {
-        "xmldom": "0.1.27"
-      }
-    },
     "import-local": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-0.1.1.tgz",
@@ -4950,14 +4887,6 @@
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
     },
-    "jsonfile": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-      "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-      "requires": {
-        "graceful-fs": "4.1.11"
-      }
-    },
     "jsonify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -6155,14 +6084,6 @@
         "is-wsl": "1.1.0"
       }
     },
-    "optimist": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-      "integrity": "sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=",
-      "requires": {
-        "wordwrap": "0.0.3"
-      }
-    },
     "optionator": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -6647,14 +6568,62 @@
       }
     },
     "postcss-loader": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-1.3.3.tgz",
-      "integrity": "sha1-piHqH6KQYqg5cqRvVEhncTAZFus=",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.8.tgz",
+      "integrity": "sha512-KtXBiQ/r/WYW8LxTSJK7h8wLqvCMSub/BqmRnud/Mu8RzwflW9cmXxwsMwbn15TNv287Hcufdb3ZSs7xHKnG8Q==",
       "requires": {
         "loader-utils": "1.1.0",
-        "object-assign": "4.1.1",
-        "postcss": "5.2.17",
-        "postcss-load-config": "1.2.0"
+        "postcss": "6.0.14",
+        "postcss-load-config": "1.2.0",
+        "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
+          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.5.0"
+          }
+        },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "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==",
+          "requires": {
+            "chalk": "2.3.0",
+            "source-map": "0.6.1",
+            "supports-color": "4.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "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=",
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
       }
     },
     "postcss-merge-idents": {
@@ -6955,17 +6924,63 @@
       }
     },
     "postcss-url": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-5.1.2.tgz",
-      "integrity": "sha1-mLMWW+jVkkccsMqt3iwNH4MvEz4=",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-7.1.2.tgz",
+      "integrity": "sha1-4Erjhq9+pu9d9RxbRJ1rlQLNmbI=",
       "requires": {
-        "directory-encoder": "0.7.2",
-        "js-base64": "2.3.2",
         "mime": "1.4.0",
         "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
-        "path-is-absolute": "1.0.1",
-        "postcss": "5.2.17"
+        "postcss": "6.0.14",
+        "xxhashjs": "0.2.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
+          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.5.0"
+          }
+        },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "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==",
+          "requires": {
+            "chalk": "2.3.0",
+            "source-map": "0.6.1",
+            "supports-color": "4.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "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=",
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
       }
     },
     "postcss-value-parser": {
@@ -9485,7 +9500,8 @@
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
+      "dev": true
     },
     "worker-farm": {
       "version": "1.4.1",
@@ -9524,16 +9540,19 @@
       "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
       "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0="
     },
-    "xmldom": {
-      "version": "0.1.27",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
-      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
-    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
     },
+    "xxhashjs": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.1.tgz",
+      "integrity": "sha1-m76b6JYUKXbfo0wGGy0GjEPTDeA=",
+      "requires": {
+        "cuint": "0.2.2"
+      }
+    },
     "y18n": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
diff --git a/package.json b/package.json
index c93ed525bf45..40718a2f9f29 100644
--- a/package.json
+++ b/package.json
@@ -76,8 +76,8 @@
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
     "postcss-custom-properties": "^6.1.0",
-    "postcss-loader": "^1.3.3",
-    "postcss-url": "^5.1.2",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",
     "resolve": "^1.1.7",
     "rxjs": "^5.5.2",
diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index a56aa4f31c1b..83392219cbdb 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -59,23 +59,24 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
     return [
       postcssUrl({
-        url: (URL: string) => {
+        url: (URL: { url: string }) => {
+          const { url } = URL;
           // Only convert root relative URLs, which CSS-Loader won't process into require().
-          if (!URL.startsWith('/') || URL.startsWith('//')) {
-            return URL;
+          if (!url.startsWith('/') || url.startsWith('//')) {
+            return URL.url;
           }
 
           if (deployUrl.match(/:\/\//)) {
             // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
-            return `${deployUrl.replace(/\/$/, '')}${URL}`;
+            return `${deployUrl.replace(/\/$/, '')}${url}`;
           } else if (baseHref.match(/:\/\//)) {
             // If baseHref contains a scheme, include it as is.
             return baseHref.replace(/\/$/, '') +
-                `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
+                `/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
           } else {
             // Join together base-href, deploy-url and the original URL.
             // Also dedupe multiple slashes into single ones.
-            return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
+            return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
           }
         }
       }),
diff --git a/packages/@angular/cli/package.json b/packages/@angular/cli/package.json
index 46e35541ec11..504101a1ea30 100644
--- a/packages/@angular/cli/package.json
+++ b/packages/@angular/cli/package.json
@@ -60,8 +60,8 @@
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
     "postcss-custom-properties": "^6.1.0",
-    "postcss-loader": "^1.3.3",
-    "postcss-url": "^5.1.2",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",
     "resolve": "^1.1.7",
     "rxjs": "^5.5.2",