diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts
index 8ecd7787c17f..51f5cf093ac6 100644
--- a/packages/angular-cli/models/webpack-build-utils.ts
+++ b/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 --git a/tests/e2e/tests/build/styles/extract-css.ts b/tests/e2e/tests/build/styles/extract-css.ts
new file mode 100644
index 000000000000..92c614999f22
--- /dev/null
+++ b/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*}/));
+}