Как настроить конфигурацию веб-пакета для взаимодействия с модулями CSS?

Question

В настоящее время я пытаюсь использовать модули css в моих реактивных компонентах. Однако у меня возникают проблемы с правильной настройкой моего webpack.config. Тем не менее мой стиль CSS не выполняется.

Файл webpack.config

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/, 
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader",
        }]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
              modules: true,
              importLoaders: 1,
            },
          },
          'css-loader',
        ],
        include: /\.module\.css$/
      },
    ]
  }
};

Errors.module.css

.errorTxt {
    color: red;
    font-weight: bold;
    font-size: large;
}

, используемый в моих компонентах .js

import styles from './Errors.module.css';

<p className={styles.errorTxt}>{this.state.connectionMessage}</p>

Я ожидаю, что текст красный, но это не так.