How to convert separate scss files to separate css files (Webpack)?

Question

css

In the project, there are a /srcbunch of scss files in a folder inside different folders:

|- src
     |- scss
          global.scss
          |- pages
              index.scss
              works.scss
              blog.scss

It is necessary to convert all .scss to .css using webpack and put them in /buildsuch a way that the original structure of files and folders is preserved, and at the same time all .scss are not merged into the final, conditionally, bundle.cssbut are located separately:

|- build
     |- scss
          global.css
          |- pages
              index.css
              works.css
              blog.css

This is what the webpack config looks like

webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const filename = (ext) => `[name].${ext}`;
const cssFilename = () => `css/${filename('css')}`;

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: './js/index.js',
  output: {
    filename: `./js/${filename('js')}`,
    path: path.resolve(__dirname, (isProd) ? 'build' : 'dev'),
    assetModuleFilename: '[path]/[name][ext]'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, 'dev'),
    open: false,
    compress: true,
    writeToDisk: true
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/js/misc'),
          to: path.resolve(__dirname, (isProd) ? 'build/js/misc' : 'dev/js/misc')
        }
      ]
    }),
     new MergeIntoSingleFilePlugin({
      files: {
        'js/libs/libs.js': [
          './src/js/libs/jquery-3.4.1.min.js',
          './src/js/libs/jquery-ui.min.js',
          './src/js/libs/jquery.fancybox.min.js',
          './src/js/libs/jquery.validate.min.js',
          './src/js/libs/jquery.validate.unobtrusive.min.js',
          './src/js/libs/signalr.min.js',
          './src/js/libs/gsap.min.js'
        ]
      }
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/'
              }
            }
          }, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|jpeg|svg)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      
    ],
  }
};