Use extract-text-plugin to extract css bundle for production builds.

Development builds continue to use style-loader for fast developer workflow (HMR).
Production builds use static, minimized, CSS file.

Author: jimitndiaye

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

@@ -71,24 +71,6 @@ export function getWebpackCommonConfig(
           loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
         },
 
-        // outside of main, load it via style-loader
-        {
-          include: styles,
-          test: /\.css$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader']
-        }, {
-          include: styles,
-          test: /\.styl$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
-        }, {
-          include: styles,
-          test: /\.less$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
-        }, {
-          include: styles,
-          test: /\.scss$|\.sass$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
-        },
 
         // load global scripts using script-loader
         { include: scripts, test: /\.js$/, loader: 'script-loader' },

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

@@ -1,6 +1,11 @@
 const path = require('path');
 
 export const getWebpackDevConfigPartial = function(projectRoot: string, appConfig: any) {
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const styles = appConfig.styles
+               ? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
+               : [];
+  const cssLoaders = ['style-loader', 'css-loader?sourcemap', 'postcss-loader'];
   return {
     devtool: 'cheap-module-source-map',
     output: {
@@ -9,6 +14,28 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
       sourceMapFilename: '[name].map',
       chunkFilename: '[id].chunk.js'
     },
+    module: {
+      rules: [
+        // outside of main, load it via style-loader for development builds
+        {
+          include: styles,
+          test: /\.css$/,
+          loaders: cssLoaders
+        }, {
+          include: styles,
+          test: /\.styl$/,
+          loaders: [...cssLoaders, 'stylus-loader?sourcemap']
+        }, {
+          include: styles,
+          test: /\.less$/,
+          loaders: [...cssLoaders, 'less-loader?sourcemap']
+        }, {
+          include: styles,
+          test: /\.scss$|\.sass$/,
+          loaders: [...cssLoaders, 'sass-loader?sourcemap']
+        },
+      ]
+    },
     node: {
       fs: 'empty',
       global: true,

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

@@ -2,6 +2,7 @@ import * as path from 'path';
 const WebpackMd5Hash = require('webpack-md5-hash');
 const CompressionPlugin = require('compression-webpack-plugin');
 import * as webpack from 'webpack';
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 declare module 'webpack' {
   export interface LoaderOptionsPlugin {}
@@ -14,6 +15,11 @@ declare module 'webpack' {
 }
 
 export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const styles = appConfig.styles
+               ? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
+               : [];
+  const cssLoaders = ['css-loader?sourcemap&minimize', 'postcss-loader'];
   return {
     devtool: 'source-map',
     output: {
@@ -22,7 +28,30 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
       sourceMapFilename: '[name].[chunkhash].bundle.map',
       chunkFilename: '[id].[chunkhash].chunk.js'
     },
+    module: {
+      rules: [
+        // outside of main, load it via extract-text-plugin for production builds
+        {
+          include: styles,
+          test: /\.css$/,
+          loaders: ExtractTextPlugin.extract(cssLoaders)
+        }, {
+          include: styles,
+          test: /\.styl$/,
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'stylus-loader?sourcemap'])
+        }, {
+          include: styles,
+          test: /\.less$/,
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'less-loader?sourcemap'])
+        }, {
+          include: styles,
+          test: /\.scss$|\.sass$/,
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'sass-loader?sourcemap'])
+        },
+      ]
+    },
     plugins: [
+      new ExtractTextPlugin('[name].[contenthash].bundle.css'),
       new WebpackMd5Hash(),
       new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8 : true },