From 5d346c1423f5d7297b1084d14de1665216450798 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Thu, 11 Jan 2018 22:42:26 -0500
Subject: [PATCH 1/2] fix(@angular/cli): correct CSS resource resolving

---
 packages/@angular/cli/models/webpack-configs/styles.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index b5ac8df8be10..e4524cb612b8 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -55,6 +55,9 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       postcssImports({
         resolve: (url: string, context: string) => {
           return new Promise<string>((resolve, reject) => {
+            if (url && url.startsWith('~')) {
+              url = url.substr(1);
+            }
             loader.resolve(context, url, (err: Error, result: string) => {
               if (err) {
                 reject(err);
@@ -110,7 +113,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           filter: (asset: PostcssUrlAsset) => !asset.hash && !asset.absolutePath.endsWith('.cur'),
           url: 'inline',
           // NOTE: maxSize is in KB
-          maxSize: 10
+          maxSize: 10,
+          fallback: 'rebase',
         }
       ]),
       autoprefixer(),

From 6a2a861df3ab76fdb7d4deab13827d507158f76a Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 12 Jan 2018 12:39:53 -0500
Subject: [PATCH 2/2] test: add Angular Material stylesheet import test

---
 .../e2e/tests/build/styles/material-import.ts | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 tests/e2e/tests/build/styles/material-import.ts

diff --git a/tests/e2e/tests/build/styles/material-import.ts b/tests/e2e/tests/build/styles/material-import.ts
new file mode 100644
index 000000000000..d739502a0bc0
--- /dev/null
+++ b/tests/e2e/tests/build/styles/material-import.ts
@@ -0,0 +1,37 @@
+import {
+  writeMultipleFiles,
+  replaceInFile
+} from '../../../utils/fs';
+import { ng, silentNpm } from '../../../utils/process';
+import { stripIndents } from 'common-tags';
+import { updateJsonFile } from '../../../utils/project';
+
+export default function () {
+  const extensions = ['css', 'scss', 'less', 'styl'];
+  let promise: Promise<any> = Promise.resolve()
+    .then(() => silentNpm('install', '@angular/material@5.0.4'));
+
+  extensions.forEach(ext => {
+    promise = promise.then(() => {
+      return writeMultipleFiles({
+        [`src/styles.${ext}`]: stripIndents`
+          @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+        `,
+        [`src/app/app.component.${ext}`]: stripIndents`
+          @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+        `,
+        })
+        // change files to use preprocessor
+        .then(() => updateJsonFile('.angular-cli.json', configJson => {
+          const app = configJson['apps'][0];
+          app['styles'] = [`styles.${ext}`];
+        }))
+        .then(() => replaceInFile('src/app/app.component.ts',
+          './app.component.css', `./app.component.${ext}`))
+        // run build app
+        .then(() => ng('build', '--extract-css', '--sourcemap'));
+    });
+  });
+
+  return promise;
+}