Extracting Multiple CSS Files From the Same Bundle

[daniel-nagy]

I'm generating two different css files from my app bundle. One file contains app specific styling and the other contains reusable components. The entry for the reusable components is index.scss and the app styles are colocated.

My Webpack config can be summarized as follows:

const extractAppStyles = new ExtractTextPlugin({
  allChunks: true,
  filename: '[name].[contenthash].css'
});

const extractReusableStyles = new ExtractTextPlugin({
  allChunks: true,
  filename: 'styles.[contenthash].css'
});

const appCssRule = {
  include: APP,
  test: /\.scss$/,
  use: extractAppStyles.extract({...})
};

const reusableCssRule = {
  include: STYLES_ENTRY,
  test: STYLES_ENTRY,
  use: extractReusableStyles.extract({...})
};

module.exports = {
  entry: {
    app: ['index.js', 'index.scss']
  },
  plugins: [
    extractAppStyles,
    extractReusableStyles,
    new ManifestPlugin()
  ]
};

Webpack will then generate 2 css files for me

• app.hash.css
• styles.hash.css

However, when I examine the manifest file only one of the css files is included

{
  "app.css": "styles.hash.css",
}

This seems like some sort of conflict to me.

Manifest Plugin Version: 1.1.2,
Webpack Version: 3.1.0

[mastilver]

duplicate of #30

Let me know if you think it's a different issue

[daniel-nagy]

That seems like the issue, thanks.