title: Webpack SASS to CSS with same folder structure
body: <p>I'm reaching you because I don't understand how to configure webpack to build same style folder structure with css file in.</p>
  <p>Here is my base structure in source folder :</p>
  <pre><code>src
  |-images
  | |--lorem-picsum.png
  |-pages
  | |--about.html
  | |--home.html
  |-styles
  |  |-pages
  |  |  |--home.scss
  |  |  |--home.scss
  |  |--main.scss
  </code></pre>
  <p>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 :</p>
  <pre><code>src
  |-images
  | |--lorem-picsum.png
  |-pages
  | |--about.html
  | |--home.html
  |-styles
  |  |-pages
  |  |  |--home.css
  |  |  |--home.css
  |  |--main.css
  </code></pre>
  <p>So, I'm using MiniCssExtractPlugin, css-loader and sass-loader.</p>
  <p>Like this : (webpack.config.js)</p>
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  
  // List of the pages
  const pages = [&quot;about&quot;, &quot;home&quot;];
  
  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) =&gt;
              new HtmlWebpackPlugin({
                  template: path.resolve(__dirname, `./src/pages/${page}.html`),
                  filename: path.resolve(__dirname, `./dist/pages/${page}.html`),
                  chunks: [page],
              })
          ),
          new MiniCssExtractPlugin(),
      ),
  };
  </code></pre>
  <p>But when I build the project, I just get a scss file with barely nothing in it :</p>
  <pre><code>dist
  |-images
  | |--lorem-picsum.png
  |-pages
  | |--about.html
  | |--home.html
  |--b88d04fba731603756b1.scss
  |--main.js
  </code></pre>
  <p>(b88d04fba731603756b1.scss)</p>
  <pre><code>// extracted by mini-css-extract-plugin
  export {};
  </code></pre>
  <p>If you see where I'm going wrong, I'd love to hear from you.
  Thank you in advance for your help</p>