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

Question

我使用scss编写样式，并且使用css模块，因此每个组件都有自己的样式。

我的webpack代码在下面，但这是我的问题。

我希望我的产品捆绑包有一个单独的CSS捆绑包。 我能够生成一个单独的CSS bundle.css ，但是没有组件之间到样式的映射。 因此，它破坏了引导程序样式。

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

尝试在entry添加css文件。

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

Answer 2

我正在使用CSS模块

您可能在开发配置中使用了它们，但是没有在生产配置中启用它们。 也将modules选项添加到ExtractTextPlugin的css-loader中。

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