javascript - 如何让 CSS 模块与 React 的纯组件一起工作？

Question

CSS 模块与 React 类一起工作就像一个魅力Component，但是，当我尝试在我的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'
        ]
      }
    ]
  }
};