Refresh doesn't work for css or scss files

[vkrenta]

When I try to change tsx files it works, but when I change my scss files refresh doesnt applies. In console we can see this

My webpack config file

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: ["@babel/polyfill",  "./src/index.tsx", "./src/assets/fonts/RoobertFonts.scss",],
    optimization: {
        minimize: false,
    },
    output: {
        path: path.resolve(__dirname, "public"),
        publicPath: "/",
        filename: "[name].[hash].bundle.js",
        hashFunction: "xxhash64",
    },
    devServer: {
        port: 3000,
        allowedHosts: "all",
        historyApiFallback: true,
        hot: true,
    },
    plugins: [
        new ReactRefreshPlugin(),
        new HTMLWebpackPlugin({
            template: "./src/index.html",
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].[hash].bundle.css",
        }),
        new CopyWebpackPlugin({
            patterns: [{ from: "src/assets", to: "assets" }],
        }),
    ],
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        alias: { "~": path.resolve(__dirname, "src") },
        fallback: { "process/browser": require.resolve("process/browser"), }
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["@babel/preset-env"], plugins: ["react-refresh/babel"] },
                },
                exclude: /node_modules/,
            },
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.s(a|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                        options: {
                            url: true,
                            modules: {
                                mode: "local",
                                localIdentName: "[name]__[local]--[hash:base64:5]",
                            },
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ["autoprefixer"],
                            },
                        },
                    },
                    {
                        loader: "resolve-url-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            sassOptions: {
                                outputStyle: "compressed",
                            },
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
            },
            {
                test: /\.(svg)$/,
                type: "asset/inline",
                use: "svgo-loader",
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "file-loader",
                options: {
                    name: "[name].[ext]",
                    outputPath: "/assets/",
                },
                exclude: /.icons/,
            },
            {
                test: /\.(woff(2)?|ttf|eot)$/,
                type: "asset/resource",
                generator: {
                    filename: "./fonts/[name][ext]",
                },
            },
        ],
    },
    watchOptions: {
        aggregateTimeout: 300,
        ignored: "**/node_modules",
    },
};