In prod mode with ExtractTextPlugin, my styles import returns an array of values.

In development mode, I don’t seem to have any issues running the application. The styles are loaded by javascript and the variables are available as objects for require styles, the way css-modules intended me to use it.

{ headerTitle: 'headerTitle___1VPCU', _style: '.headerTitle___1VPCU {\n color: #c51d23;\n font-size: 1.167em;\n font-weight: 700;\n text-transform: uppercase;\n padding: 18% 1% 1% 1%;\n text-align: center;\n}' }

The problem I run into is is production mode. My import returns an array set containing path information of the required style file, followed with the contents of the style file converted by postcss.

[ [ '/Users/shouvik/Documents/dream11/pandora/client/containers/MatchCenter/style.css.webpack-module', '.headerTitle___1VPCU{color:#c51d23;font-size:1.167em;font-weight:700;text-transform:uppercase;padding:18% 1% 1%;text-align:center}', '' ] ]

I am not sure where exactly am I going wrong when it comes to configuring my webpack.

For the webpack-isomorphic-tools.js, I have reused the code written here. For my webpack config I do this:

module.exports = {
  context: path.resolve(__dirname, '..'),
  entry: {
    jsx: './client/index.js',
    html: './client/index.html',
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux'
    ]
  },
  output: {
    path: assetsPath,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.css$/,
        include: /client/,
        loaders: (
          () => {
            if (isDevelopment) {
             return [
              'style-loader',
              'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
              'postcss-loader'
            ] } else return [
              ExtractTextPlugin.extract('style-loader', 'css-loader'),
              'css-loader?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]',
              'postcss-loader'
            ]
          }
        )()
      },
      {
        test: /\.css$/,
        exclude: /client/,
        loader: 'style!css'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel-loader'
        ]
      }
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  postcss: [
    values,
    assets({
      basePath : 'client/assets',
      loadPaths: ['images','fonts'],
      relative : true,
      cacheBuster: true
    }),
    rucksack({
      autoprefixer: true
    })
  ],
  plugins: (() => {
    const plugins = [];

    if(isDevelopment) {
      plugins.push(
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        new webpack.DefinePlugin({
          'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') },
          __CLIENT__: true,
          __SERVER__: false,
          __DEVELOPMENT__: true,
          __DEVTOOLS__: true
        }),
        webpackIsomorphicToolsPlugin.development()
      )
    } else {
      plugins.push(
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
        new webpack.DefinePlugin({
          'process.env': { 
            NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') 
          },
          __CLIENT__: true,
          __SERVER__: false,
          __DEVELOPMENT__: false,
          __DEVTOOLS__: false
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        webpackIsomorphicToolsPlugin
      )
    }
    return plugins
  })(),
  devServer: {
    contentBase: '../client',
    hot: true
  }
}

[catamphetamine]

You can post the whole file

[shouvik]

Yep @halt-hammerzeit Thanks a bunch for your time.