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

Author: changLiuUNSW

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: ''
       })
     })));
   }

tests/e2e/tests/build/styles/extract-css.ts

@@ -0,0 +1,31 @@
+import * as glob from 'glob';
+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'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /div\s*{\s*background:\s*url\(more.svg\);\s*}/))
+    .then(() => ng('build', '--prod'))
+    .then(() => glob.sync('dist/styles.*.bundle.css').find(file => !!file))
+    .then((stylesBundle) => expectFileToMatch(stylesBundle,
+      /div\s*{\s*background:\s*url\(more\..*svg\)\s*}/))
+    // build with deloyUrl
+    .then(() => ng('build', '--deploy-url=client/'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /div\s*{\s*background:\s*url\(more.svg\);\s*}/))
+    .then(() => ng('build', '--prod', '--deploy-url=client/'))
+    .then(() => glob.sync('dist/styles.*.bundle.css').find(file => !!file))
+    .then((stylesBundle) => expectFileToMatch(stylesBundle,
+      /div\s*{\s*background:\s*url\(more\..*svg\)\s*}/));
+}