Webpack объединяет несколько css-файлов в один CSS-файл

#webpack #sass

Вопрос:

Я пытаюсь создать очень простой конфигурационный файл webpack, который будет принимать все файлы scss в проекте (включая вложенные папки), а также переносить и выводить в один файл CSS в папке dist. Я использую плагин minicssextract для этого

Звучит достаточно просто, но мне не везет с настройкой, ниже приведено содержание моего webpack.config.js файл:

 const path = require('path'); const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');  module.exports = {  entry: './src/index.js',  output: {  filename: 'main.js',  path: path.resolve(__dirname, 'dist'),  },  module: {  rules: [  {  test: /.css$/,  include: resolve(__dirname, 'node_modules', 'react-toolbox'),  use: [  MiniCssExtractPlugin.loader,  // 'style-loader',  {  loader: 'css-loader',  options: {  modules: true,  sourceMap: true,  importLoaders: 1,  localIdentName: '[name]_[local]_[hash:base64:5]'  }  },  // 'postcss-loader'  ]  },  {  test: /.scss$/,  use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']  },  {  test: /.css$/,  exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),  use: ['style-loader', 'css-loader']  },  ]  },  plugins: [  new MiniCssExtractPlugin({  filename: 'style.css',  }),  ], };  

Есть идеи, где я ошибаюсь?