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