css - ファイル/フォルダー構造を保持する webpack を使用して SCSS を CSS に最小化する

Question

同じフォルダーとファイル構造を維持しながら、scss ファイルをコンパイルして css に縮小する方法を理解するのに苦労しています。私は MiniCssExtractPlugin を使用して、style-loader、css-loader、postcss-loader、および sass-loader だけでなく、すべてを抽出しています

これが私の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 ファイルが取得され、他のファイルも含まれません。必要なプロセスを理解するのを手伝ってくれる人はいますか? 私は各ローダーのドキュメントをすべて調べてきましたが、探しているものを本当に理解していません。

ありがとう！