Webpack - sass - generating separate files for a specific directory outside of app.css - How to achieve?

Question

css

Initial webpack config:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: "production",
    entry: {
    app:[
      './static/js/main.js',
      './static/sass/main.sass'
    ],
  },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.js/,
                loaders: ['babel-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
      
      //fonts
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[{
                    loader: 'file-loader',
                    options: {
                        name:'./fonts/[name].[ext]'
                    }
                }]
            },

            //img
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'img-loader'
                ]
            },

            //sass
            {
                test: /\.(sa|c)ss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            //svg
            {
                test:/\.svg$/,
                loader: 'svg-url-loader',
            },

            // pug
            {
                test: /\.pug$/,
                loaders: [
                    {
                        loader: "html-loader"
                    },
                    {
                        loader: "pug-html-loader",
                        options: {
                            "pretty":true
                        }
                    }
                ]
            }
        ]
    },
  
  plugins:[
    
    new MiniCssExtractPlugin({
            filename: './css/[name].css'
    }),
    
    new HtmlWebpackPlugin({
            filename: "index.html",
            template: 'pug/pages/index.pug'
    }),
    
    new CopyWebpackPlugin([{
            from: './static/img',
            to: './img'
        }]),
      
    new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: {
                baseDir: ['dist']
            }
    })
    
  ]
};

Now the project is perfectly assembled into one app.js and app.css
But the task arose to make style modifiers written in sass, which must be included in separate files converted to regular css. Unable to separate files from /src/static/sass/modifier/ folder
File structure:

/
-src/
--static/
---js/
---sass/
----modifier/
-----black.sass

/
-dist/
--css/
---app.css
---modifier/
----black.css # -- Как этого добиться?
--js/
---app.js