fix(build): override publicPath for ExtractTextPlugin and add extract-css test (angular#4036)

Author: changLiuUNSW

Diff for: packages/angular-cli/models/webpack-build-utils.ts

@@ -80,7 +80,9 @@ export function makeCssLoaders(stylePaths: string[] = []) {
       include: stylePaths, test, loaders: ExtractTextPlugin.extract({
         remove: false,
         loader: ['css-loader', ...commonLoaders, ...loaders],
-        fallbackLoader: 'style-loader'
+        fallbackLoader: 'style-loader',
+        // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
+        publicPath: ''
       })
     })));
   }

Diff for: tests/e2e/tests/build/styles/extract-css.ts

@@ -0,0 +1,21 @@
+import { writeMultipleFiles, expectFileToMatch } from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { stripIndents } from 'common-tags';
+
+export default function () {
+    return writeMultipleFiles({
+    'src/styles.css': stripIndents`
+      div { background: url("./assets/more.svg"); }
+    `,
+    'src/assets/more.svg': stripIndents`
+      <svg width="100" height="100">
+        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+      </svg>
+    `})
+    .then(() => ng('build', '--extract-css'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /div\s*{\s*background:\s*url\(more.svg\);\s*}/))
+    .then(() => ng('build', '--extract-css', '--deploy-url=client/'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /div\s*{\s*background:\s*url\(more.svg\);\s*}/));
+}