Webpack SASS to CSS with same folder structure

Question

I'm reaching you because I don't understand how to configure webpack to build same style folder structure with css file in.

Here is my base structure in source folder :

src
|-images
| |--lorem-picsum.png
|-pages
| |--about.html
| |--home.html
|-styles
|  |-pages
|  |  |--home.scss
|  |  |--home.scss
|  |--main.scss

What I want is simply a compiling from scss to css file. Moreover, I want to keep the same folder/file structure as in my source folder. Like this :

src
|-images
| |--lorem-picsum.png
|-pages
| |--about.html
| |--home.html
|-styles
|  |-pages
|  |  |--home.css
|  |  |--home.css
|  |--main.css

So, I'm using MiniCssExtractPlugin, css-loader and sass-loader.

Like this : (webpack.config.js)

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// List of the pages
const pages = ["about", "home"];

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './src/entry.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    minimize: false,
                }
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name][ext]'
                }
            },
            {
               test: /\.(s(a|c)ss)$/,
               use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
            }
        ],
    },
    plugins: [].concat(
        pages.map((page) =>
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, `./src/pages/${page}.html`),
                filename: path.resolve(__dirname, `./dist/pages/${page}.html`),
                chunks: [page],
            })
        ),
        new MiniCssExtractPlugin(),
    ),
};

But when I build the project, I just get a scss file with barely nothing in it :

dist
|-images
| |--lorem-picsum.png
|-pages
| |--about.html
| |--home.html
|--b88d04fba731603756b1.scss
|--main.js

(b88d04fba731603756b1.scss)

// extracted by mini-css-extract-plugin
export {};

If you see where I'm going wrong, I'd love to hear from you. Thank you in advance for your help