Not all styles included in extracted css

[KELiON]

How can I debug why not all css modules are included in final css bundle?

I've migrated to webpack 2 and rewrote my production config:

module: {
  loaders: [
    ...baseConfig.module.loaders,

    {
      test: /global\.css$/,
      loader: ExtractTextPlugin.extract(
        'style-loader',
        'css-loader'
      )
    },

    {
      test: /^((?!global).)*\.css$/,
      loader: ExtractTextPlugin.extract(
        'style-loader',
        'css-loader?modules&importLoaders=1&!postcss-loader'
      )
    }
  ]
}
...
plugins: [
  ...
  new ExtractTextPlugin('style.css', { allChunks: true }),
  ...
]

And now:

module: {
  rules: [
    ...baseConfig.module.rules,

    {
      test: /global\.css$/,
      loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: 'css-loader'
      })
    },
    {
      test: /^((?!global).)*\.css$/,
      loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: 'css-loader?modules&importLoaders=1!postcss-loader'
      })
    }
  ]
}
...
plugins: [
  ...
  new ExtractTextPlugin({
    filename: 'style.css',
    allChunks: true
  }),
  ...
]

First config works in webpack 1, but with new config and webpack 2 I see that a lot of styles are not in styles.css. How can I debug why it happens?

Also, if I use rules from development (without ExtractCss) it works:

{
  test: /global\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    }
  ]
},

{
  test: /^((?!global).)*\.css$/,
  use: [
    {
      loader: 'style-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 1
      }
    },
    'postcss-loader'
  ]
}

[TNT-Likely]

i also have this problem

[TNT-Likely]

wish one guy help me resolve this problem

[bebraw]

Could someone set up a standalone project to study?

[bebraw]

@KELiON Any luck with getting a little demo to study?

[Sharlaan]

Not sure, maybe related to this (found in wp2 docs) ?

[KELiON]

Sorry, missed few notifications here.

I'll try to check what happens with the latest versions of webpack and extract text plugin and set up a demo if it still happens, but if you want to check before I had this issue here (branch feature/webpack2)

[breezewish]

+1. In my project, it is only able to extract CSS in one rule. Outputs from other rules using the plugin are ignored.

[bebraw]

@breeswish Unless someone can provide a project to study, this won't get fixed.

[breezewish]

@bebraw Completely agree with you. Just got free time to create a small demo for this bug. Please check it out here: https://github.com/breeswish/demo

cd demo/My.Project
npm install
npm run build

According to the webpack.config.js, some part of foundation-sites scss should be compiled and placed into dist/vendors.css, which is not happening. The content just disappeared, not placed into any file. vendors.css only contains css from ../My.UI/pkg1/style.css.

However, by commenting out the CommonsChunkPlugin, or by commenting L45 and uncommenting L46 (change to another ExtractTextPlugin), it works.

[bebraw]

@breeswish Great example. Thank you. 👍

I traced it down to minChunks. If you replace it with minChunks: module => module.context && module.context.indexOf('node_modules') >= 0,, it seems to fix the issue.

Now the question is, is it the same bug as for the others? And is this a bug even or just the way CommonsChunkPlugin works?

[breezewish]

Thank you for the quick workaround! Really helpful for my current crying needs. 👍

[bebraw]

Please re-open with a small project study if still relevant.