Как сконвертировать отдельные scss-файлы в отдельные css-файлы (Webpack)?

Question

[Alexander Popow]

В проекте в папке /src лежит куча scss-файлов внутри разных папок:

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

Необходимо c помощью webpack сконвертировать все .scss в .css и положить в /build таким образом, чтобы исходная структура файлов и папок сохранилась, и при этом все .scss не были объединены в итоговый, условно, bundle.css, а находились отдельно:

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

Так выглядит конфиг вебпака

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',
			},
			
		],
	}
};