Webpack mini-css-extract-plugin не включает мои scss во время процесса связывания

Question

У меня есть приложение React, в которое я пытаюсь включить sass.
Я также использую Webpack для объединения всех моих файлов .scss в один файл .css для производства.
Для этого я использую плагин mini-css-extract-plugin, но все мои файлы стилей нене включены в окончательный выходной файл, даже если они импортированы в мой app.js ниже.Только мои файлы .scss из моего app.js правильно загружены в комплект, но не мои styles.scss.Таким образом, мой стиль работает на стадии разработки, но не при развертывании для производства.

Вот команда, которую я запускаю, когда хочу создать свое приложение (в моем файле package.json).

"build": "webpack --mode production --config webpack.prod.js ./src/app.js --output ./dist/bundle.js"

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  }
});

webpack.common.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      favicon: './public/images/favicon.ico'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

src/app.js

import 'normalize.css/normalize.css';
import 'react-dates/lib/css/_datepicker.css';
import './styles/styles.scss';

src / styles / styles.scss

@import './base/settings';
@import './base/base';
@import './components/_button';
@import './components/_header';
@import './components/_content-container';
@import './components/_page-header';
@import './components/_input-group';
@import './components/_inputs';
@import './components/_form';
@import './components/_list';

Выход Webpack

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 217 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/normalize.css/normalize.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/react-dates/lib/css/_datepicker.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/styles/styles.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 3.66 KiB {0} [built]
        + 1 hidden module