Angular 2 Webpack Single CSS File

Here’s a webpack configuration to put all the CSS styles into one file.

{
   test: /\.styl/,
   loader: ExtractTextPlugin.extract({
     fallback: [
       { loader: 'style-loader', options: { sourceMap: true } }
     ],
     use: [
       { loader: 'css-loader', options: { sourceMap: true } },
       { loader: 'resolve-url-loader', options: { sourceMap: true, keepQuery: true } },
       { loader: 'postcss-loader', options: { sourceMap: true } },
       { loader: 'stylus-loader', options: { sourceMap: true } }
     ]
   })
 }

You can remove resolve-url-loader if you are not using url-loader (resolve-url-loader only does translate relative paths to absolute, when requiring Stylus files from a Stylus file.

The plugins section also needs

plugins: {
  new ExtractTextPlugin({
     filename: 'assets/css/styles.css',
     allChunks: true
  })
}

ExtractTextPlugin could be also used in shorter format:

ExtractTextPlugin.extract(‘raw-loader!postcss-loader!stylus-loader?sourceMap=false’)

Install via `npm install extract-text-webpack-plugin`.

Thanks to @spot on the AngularBeers Slack.