Webpack: generate separate stylesheets per theme

Question

I am using CSS modules to conditionally load the top-level stylesheet (stylus). This works fine when I am running webpack-dev-server, but I am trying to generate 2 CSS files: theme1.css and theme2.css.

Here is the top-level index.js file.

export function loadStylesheet() {
  if (condition1) {
    require('../../styles/theme1.styl');
  } else {
    require('../../styles/theme2.styl');
  }
}

Webpack Here is the webpack.config.prod.js

// ...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: [
        /node_modules/,
        /src\/lib/
      ],
      loaders: ['babel', 'eslint-loader']
    },
    {
      test: /\.html$/,
      loader: 'file?name=[name].[ext]'
    },
    {
      test: /\.styl$/,
      include: path.join(__dirname, 'src', 'styles'),
      loader: ExtractTextPlugin.extract('style', '!css?-url!postcss!stylus')
    },
    {
      test: /\.jpg|.png|.gif|.otf$/,
      loader: 'file?name=[path][name].[ext]'
    }
  ]
},
plugins: [
  // ...
  new ExtractTextPlugin('css/style.css', { allChunks: true })
]
// ...