diff --git a/package.json b/package.json
index d4aaefbdc9b7..6b0e05751f93 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-loader": "^0.0.2",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",
diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
index 0258c121d3ba..4a15d4b8fa7b 100644
--- a/packages/angular-cli/models/webpack-build-common.ts
+++ b/packages/angular-cli/models/webpack-build-common.ts
@@ -71,23 +71,46 @@ export function getWebpackCommonConfig(
           loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
         },
 
-        // outside of main, load it via style-loader
+        // outside of main, extract static css files using extract and file loaders.
         {
           include: styles,
           test: /\.css$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader'
+          ]
         }, {
           include: styles,
           test: /\.styl$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'stylus-loader'
+          ]
         }, {
           include: styles,
           test: /\.less$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'less-loader'
+          ]
         }, {
           include: styles,
           test: /\.scss$|\.sass$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'sass-loader'
+          ]
         },
 
         // load global scripts using script-loader
@@ -120,7 +143,7 @@ export function getWebpackCommonConfig(
       ),
       new webpack.optimize.CommonsChunkPlugin({
         // Optimizing ensures loading order in index.html
-        name: ['styles', 'scripts', 'main'].reverse()
+        name: ['scripts', 'main'].reverse()
       }),
       new webpack.optimize.CommonsChunkPlugin({
         minChunks: Infinity,
diff --git a/packages/angular-cli/package.json b/packages/angular-cli/package.json
index db6abf8e9ecf..9fdd5eb69bc0 100644
--- a/packages/angular-cli/package.json
+++ b/packages/angular-cli/package.json
@@ -48,6 +48,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-loader": "^0.0.2",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",