roylee0704 / react-flexbox-grid

A set of React components implementing flexboxgrid with the power of CSS Modules.
http://roylee0704.github.io/react-flexbox-grid/
2.93k stars 206 forks source link

Problem with ExtractTextPlugin #123

Closed maxgram closed 7 years ago

maxgram commented 7 years ago

Hey guys, thanks for putting together such a nice lib.

I'm working on universal example and I got kind of an odd issue. When I use it with dev setup it works like a charm; however, when I try to make a css build somehow bundle.css gets flexbox styles but none of the styles imported in components/containers.

I'm using webpack 3 and my setup looks like this:

module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /react-flexbox-grid/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: (loader) => [
                  require('postcss-modules-values')(),
                  require('postcss-nested')(),
                  require('autoprefixer')(),
                ]
              }
            }
          ]
        })
      },
      //
    ]
  },

It's a bit odd since I'm excluding react-flexbox-grid, but it's the only thing that is included. I'm assuming styles are coming from react-flexbox-grid, but I almost broke my head trying to understand why the rest excluded. exclude: /flexbox/ or /node_modules/ causing webpack to treat flexbox.css as JS files. Any thoughts will be highly appreciated. here is webpack/config.dev.js and webpack/config.prod.js

maxgram commented 7 years ago

The problem was actually in CommonsChunkPlugin If someone has similar issue solution here