javascript - CSS モジュールを React の純粋なコンポーネントで動作させるにはどうすればよいですか?

Question

CSS モジュールは ReactComponentクラスで魅力的に機能しますが、(つまり、クラスなしで) それらを自分で実装しようとするとpure components、Webpack はコードをコンパイルできません:

以下は単純なコンポーネントです。

import React from 'react';
import styles from './Button.scss';

const Button = ({ text, onClick }) => {
  return (
    <button type="button"
            onClick={onClick}
            className={`${styles.button} btn btn-primary btn-lg btn-block`}>
      {text}
    </button>
  );
};

export default Button;

...そしてスタイル

// TESTING

:global {
  .btn-primary {
    background: red !important;
  }
}

.button {
  background: red !important;
}

そして、developmentこれがベースを拡張する私の構成です（ここでは実際には必要ありません）：

import webpack from 'webpack';
import env from '../config/env';
import baseConfig from './webpack.config.base';

export default {
  ...baseConfig,

  debug: true,
  noInfo: true,
  devtool: 'cheap-module-eval-source-map',

  entry: [
    `webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
    'webpack/hot/dev-server',
    ...baseConfig.entry
  ],

  output: {
    ...baseConfig.output,
    publicPath: `http://localhost:${env.WEBPACK_PORT}/dist/`,
    filename: 'bundle.js'
  },

  plugins: [
    ...baseConfig.plugins,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],

  module: {
    ...baseConfig.module,
    loaders: [
      ...baseConfig.module.loaders,
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loaders: [
          'style?sourceMap',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!autoprefixer!sass'
        ]
      }
    ]
  }
};