fix(@angular/cli): correct CSS resource resolving

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(),

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/[email protected]'));
+
+  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;
+}