Use extract-text-plugin to bundle all styles

Author: jimitndiaye

package.json

@@ -65,7 +65,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
-    "extract-loader": "^0.0.2",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",

packages/angular-cli/models/webpack-build-common.ts

@@ -4,7 +4,7 @@ import {GlobCopyWebpackPlugin} from '../plugins/glob-copy-webpack-plugin';
 import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack';
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 export function getWebpackCommonConfig(
   projectRoot: string,
@@ -71,46 +71,26 @@ export function getWebpackCommonConfig(
           loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
         },
 
-        // outside of main, extract static css files using extract and file loaders.
+        // outside of main, extract static css files using extract-text-plugin
         {
           include: styles,
           test: /\.css$/,
-          loaders: [
-            'file-loader?name=[name].css',
-            'extract-loader',
-            'css-loader',
-            'postcss-loader'
-          ]
-        }, {
+          loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader'])
+        },
+        {
           include: styles,
           test: /\.styl$/,
-          loaders: [
-            'file-loader?name=[name].css',
-            'extract-loader',
-            'css-loader',
-            'postcss-loader',
-            'stylus-loader'
-          ]
-        }, {
+          loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'stylus-loader'])
+        },
+        {
           include: styles,
           test: /\.less$/,
-          loaders: [
-            'file-loader?name=[name].css',
-            'extract-loader',
-            'css-loader',
-            'postcss-loader',
-            'less-loader'
-          ]
-        }, {
+          loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'less-loader'])
+        },
+        {
           include: styles,
           test: /\.scss$|\.sass$/,
-          loaders: [
-            'file-loader?name=[name].css',
-            'extract-loader',
-            'css-loader',
-            'postcss-loader',
-            'sass-loader'
-          ]
+          loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
         },
 
         // load global scripts using script-loader
@@ -130,6 +110,9 @@ export function getWebpackCommonConfig(
         template: path.resolve(appRoot, appConfig.index),
         chunksSortMode: 'dependency'
       }),
+      new ExtractTextPlugin(environment === 'prod'
+        ? '[name].[contenthash].bundle.css'
+        : '[name].bundle.css'),
       new BaseHrefWebpackPlugin({
         baseHref: baseHref
       }),

packages/angular-cli/package.json

@@ -48,7 +48,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
-    "extract-loader": "^0.0.2",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",

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

@@ -14,6 +14,6 @@ export default function() {
     `
   })
     .then(() => ng('build'))
-    .then(() => expectFileToMatch('dist/styles.css', 'body { background-color: blue; }'))
-    .then(() => expectFileToMatch('dist/styles.css', 'p { background-color: red; }'));
+    .then(() => expectFileToMatch('dist/styles.bundle.css', 'body { background-color: blue; }'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css', 'p { background-color: red; }'));
 }