React WebPack提取文本插件.我究竟做错了什么?我的样式从bundle.js起作用，但我试图将它们移出到b

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')