Javascript MinicsSextract插件不'；t从definePlugin条目中提取样式

我想把我的scss风格分成几个部分。因此，我创建了一个由subpage.js文件导入的单独的subpage.scss（其中一个条目）。我使用miniCssExtractPlugin从JS中提取SCSS样式，并为每个文件创建样式包。我在BundleConfig中将它们映射到HTML中引用的特定样式块。 整个过程适用于main.js和main.scss，但不适用于subpage.js和subpage.scss-它将样式保留在.js文件中，并且两次加载样式（从js和HTML）。这些情况之间的唯一区别是main.js在webpack.config.js中作为条目加载，subpage.js与webpack.DefinePlugin（）中的其余条目一起加载

你知道为什么MiniCssExtractPlugin不能从使用此方法加载的.js文件中提取样式并正确提取主条目的样式吗

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'
});

我的捆绑图：

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"
        ));
    }
}