使用保持文件/文件夹结构的网页包将SCS最小化为CSS

我很难理解如何将我的scss文件编译并缩小为css，同时保持相同的文件夹和文件结构。我正在使用MiniCssExtractPlugin提取所有内容，以及样式加载器、css加载器、postcss加载器和sass加载器

这是我的src文件夹中的文件结构

app.scss

包含所有导入。从文件夹1-7导入。我首先在导入方面遇到问题，然后在编译和最小化剩余的scss文件方面遇到问题

最终目标是使编译后的文件夹看起来像这样，每个文件都最小化，app.scss捆绑所有导入

下面是我到目前为止为webpack.config.js编写的代码的摘要

plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[id].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'postcss-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } },
                ]
            }
        ]
    },
    optimization: {
        minimizer: [new TerserJSPlugin({extractComments: false}), ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](lodash)[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },

当运行这段代码时，我只在css文件夹下得到一个app.css文件，该文件夹中不包含导入，也不包含其他文件。有人能帮助我理解我需要采取的流程吗？我已经为每个加载器检查了所有文档，但并不真正理解我在寻找什么

谢谢