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'
        ]
      }
    ]
  }
};

如何让CSS模块与React的纯组件一起使用？

0 个答案: