Webpack SASS to CSS with same folder structure - css

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