Issues with css on mode: "production"

Question

Everyting runs ok with mode: "development". However, when I switch for mode: "production", some of the styles doesn't get applied. I searched for it and there was Github issue and this Stackoverflow question that stated briefly that we should remove "side-effects": false. I don't have this attribute and I seem to fing nothing about this.

Here is my package.json,

and here is my webpack.config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
 
module.exports = {
    mode: 'production', //production
    entry: {
        index: path.resolve(__dirname, './src/index.js')
    }, 
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true, 
        filename: 'portfolio.[contenthash].js'
    },
    // watch: true,
    // devtool: 'source-map',
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        port: 8080,
        open: true, // Open browser
        hot: true, // hot reload
    },
    //loaders
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.sass$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource'
            },
        ]
    },
 
    //plugins
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'portfolio.[contenthash].css',
            linkType: "text/css",
        }),
    ]
}