عدم تبدیل Scss به CSS

سلام
من طبق آموزش دوره Webpack و منابع زیر فایل Webpack را کانفیگ کردم، ولی فایل SCSS برای من به CSS تبدیل نمیشه، یا شاید تبدیل میشه ولی نمیدونم کجا ذخیره میکنه، چون هیچ خطایی نشون نمیده، جالب اینجاست که فایل های Css , js را به درستی در فولدر Dist قرار میده ولی وقتی SCSS را میدم بهش هیچ کاری نمیکنه
1.
https://webpack.js.org/loaders/sass-loader/
2.
https://www.valentinog.com/blog/webpack-4-tutorial/

webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
};

index.js

import style from "./main.scss";

console.log(`Hiiiiii`);

main.scss

h1 {
    a{
      color: red;
    }
  }