MiniCSSExtractPlugin doesn't extract styles from definePlugin entries

Question

I would like to divide my scss styles into chunks. Therefore, I created a separate subpage.scss imported by subpage.js file (one of the entries). I use miniCssExtractPlugin to extract SCSS styles from JS and create style bundles for each file. I map them in my BundleConfig to specific style chunks referenced in HTML. The whole process works for the main.js and main.scss but not for subpage.js and subpage.scss - it leaves styles in .js file and the styles are loaded twice (both from JS and from HTML). The only difference between these cases is that the main.js is loaded as an entry in webpack.config.js and subpage.js is loaded with the remaining entries in webpack.DefinePlugin().

Any idea why MiniCssExtractPlugin doesn't extract the styles from a .js file loaded using this method and extracts styles for the main entry correctly?

My webpack.config.js

const readEntries = require('./entries');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const entries = readEntries('../Scripts/entries');

module.exports = (mode) => ({

name: 'name',
context: path.resolve(__dirname, '../Scripts'),
resolve: {
    extensions: ['.js', '.json', '.html', '.vue'],
    alias: {
        '~': path.resolve(__dirname, '../Scripts'),
        'vue$': 'vue/dist/vue.esm.js',
        '@trackers': path.resolve(__dirname, '../Scripts/trackers')
    },
},
entry: {
    main: './main.js',
},
output: {
    path: path.resolve(__dirname, '../Content/bundle'),
    publicPath: '/Content/bundle/',
    filename: '[name].bundle.js',
    chunkFilename: process.env.NODE_ENV === 'production' ? '[id].js?v=[contenthash]' : '[name].js?v=[contenthash]'
},
plugins: [
    new CleanWebpackPlugin(),
    new webpack.ProgressPlugin(),
    new webpack.DefinePlugin({
        'process.env': {
            'ENTRIES': JSON.stringify(entries),
            'NODE_ENV': JSON.stringify(mode)
        }
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
        filename: '[contenthash].[name].bundle.css',
    }),
    new BundleAnalyzerPlugin({
        openAnalyzer: false,
        analyzerMode: 'static'
    })
],
module: {
    rules: [
        {
            test: require.resolve('vue'),
            use: [
                {
                    loader: `expose-loader`,
                    options: 'Vue'
                }
            ]
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.(js)$/,
            use: [
                'babel-loader'
            ],
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[contenthash]'
            }
        },
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader
                },
                'css-loader',
                'postcss-loader',
                'sass-loader'
            ]
        }
    ]
},
optimization: {
    splitChunks: {
        chunks: 'async'
    }
},
performance: {
    hints: false
},
externals: {
    jquery: 'jQuery',
    DM: 'DM'
},
stats: {
    modules: false
},
target: 'web'
});

my BundleConfig:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();
        BundleTable.EnableOptimizations = true;

        bundles.Add(new ScriptBundle("~/bundles/js/head").Include(
            "~/Scripts/head.js"
        ));

        bundles.Add(new Bundle("~/bundles/js/scripts").Include(
            "~/Content/bundle/main.bundle.js"
        ));

        bundles.Add(new StyleBundle("~/bundles/css/main").Include(
            "~/Content/bundle/*main.bundle.css"
        ));

        bundles.Add(new StyleBundle("~/bundles/css/trends").Include(
            "~/Content/bundle/*trends.bundle.css"
        ));
    }
}