Webpack样式加载程序无法加载sass模块

我有一个react应用程序,我想有sass和css支持。问题是,当我导入sass或css模块时,它不会应用于标记。我是说看看下面的代码,我想要使用样式的第二种方式:

import React from 'react';
import PropTypes from 'prop-types';
import style from './index.module.scss';
import { Header, Footer, Container } from '..';
import './style.scss'; // 1. this way is applying
import style from './style.scss'; // 2. this way is not applying



export const Layout = ({ children }) => (
  <div className="content"> // 1. this way is applying
    <Header />
    <Container>
      <div className={style.content}> // 2. this way is not applying
        {children}
      </div>
    </Container>
    <Footer />
  </div>
);

Layout.propTypes = {
  children: PropTypes.any.isRequired,
};

export default Layout;

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cones = require('./cones.json');

module.exports = {
  mode: 'development',
  entry: './src/index',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([{ from: 'public/index.html' }]),
  ],
  devServer: {
    port: 3000,
    contentBase: path.join(__dirname, './public'),
    hot: true,
    open: true,
    historyApiFallback: true,
    before(app) {
      app.get('/api/cones', (req, res) => {
        res.json(cones);
      });
    },
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
  },
};

我觉得这个有点不对劲 无法以这种方式加载样式模块。