fix(@angular/cli): ensure stylesheet relative tilde path conversion

Author: clydin

package-lock.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",

package.json

@@ -44,11 +44,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const baseHref = wco.buildOptions.baseHref || '';
   const deployUrl = wco.buildOptions.deployUrl || '';
 
-  const postcssPluginCreator = function() {
+  const postcssPluginCreator = function(loader: any) {
     return [
       postcssUrl({
         filter: ({ url }: { url: string }) => url.startsWith('~'),
-        url: ({ url }: { url: string }) => path.join(projectRoot, 'node_modules', url.substr(1)),
+        url: ({ url }: { url: string }) => {
+          const fullPath = path.join(projectRoot, 'node_modules', url.substr(1));
+          return path.relative(loader.context, fullPath);
+        }
       }),
       postcssUrl([
         {

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -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",