React + Webpack提取文本插件。 我究竟做错了什么？ 我的样式从bundle.js工作，但是我试图将它们移到bundle.css

Question

I am writing my styles using scss, and I am using css modules so each component has its own styles.

My webpack code is below, but here's my problem.

I would like my prod bundle to have a separate CSS bundle. I am able to generate a separate CSS bundle.css , but none of the mapping between components to the styles. So, it breaks bootstrap styling.

if (__PROD) {
  config = {
    devtool: 'cheap-module-source-map',
    context: appPath,
    entry: [
      'main.js'
    ],
    resolve: {
      root: appPath,
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: [
            'babel'
          ],
          include: appPath
        },
        {
          test: /\.scss$/,
          // loader: ExtractTextPlugin.extract('style', 'css!postcss!sass'),
          loader: ExtractTextPlugin.extract('css!postcss!sass')
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false
        }
      }),
      new ExtractTextPlugin('bundle.css')
    ],
    postcss: [
      autoprefixer({ browsers: ['last 3 versions'] })
    ],
    output: {
      path: buildPath,
      publicPath: '/',
      filename: 'bundle.js'
    }
  };
}

Answer 1

Try adding the css file in the entry .

entry: [
    'main.js',
    'yourFile.css'
]

Answer 2

I am using css modules

You might be using them in your dev config, but you did not enable them in your production config. Add the modules option to the css-loader in the ExtractTextPlugin as well.

ExtractTextPlugin.extract('css?modules!postcss!sass')