Mini-css-extract-plugin: Support multiple instances of MiniCssExtractPlugin

[davidli16]

• Operating System: All
• Node Version: All
• NPM Version: All
• webpack Version: 4
• mini-css-extract-plugin Version: 0.8.0

Feature Proposal

ExtractTextWebpackPlugin supports multiple instances so that it can be included as part of the pipeline for multiple loaders. I believe that we have a scenario outlined below that is not handled by any of the core Webpack features or by MiniCssExtractPlugin.

We have a large codebase that includes hundreds of SCSS files written prior to our adoption of CSS modules. Thus, we have two distinct loaders, one for our legacy SCSS and basic CSS files with modules disabled and another without.

Feature Use Case

This is a pared down version of our CSS loader configuration using ExtractTextPlugin

{
    // CSS modules
    test: /\.scss$/,
    exclude: [/_\w+\.scss/],
    use: ExtractTextPlugin.extract({
        use: [
            {
                loader: 'css-loader',
                options: {
                    // Enable CSS modules by default on all files
                    modules: true,
                    importLoaders: 1,
                    minimize: isProd,
                },
            },
            {
                loader: 'sass-loader',
                {
                    includePaths: [
                        path.join(options.root, 'src'),
                    ],
                },
            },
        ],
        fallback: 'style-loader',
    }),
},
{
    // Legacy CSS files (no CSS modules)
    test: /_\w+\.scss$|\w+\.css$/,
    use: ExtractTextPlugin.extract({
        use: [
            {
                loader: 'css-loader',
                options: {
                    // Note that `modules: false` is set here by default
                    importLoaders: 1,
                    minimize: isProd,
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    includePaths: [
                        path.join(options.root, 'src'),
                    ],
                },
            },
        ],
        fallback: 'style-loader',
    }),
},

[alexander-akait]

Use splitChunk in you case, each css modules file should have name.modules.css filename so you can extract them easy

[davidli16]

Maybe I am misunderstanding how MiniCssExtractPlugin works. but it's not clear to me how splitChunk would work for this use case. I actually want to generate a single output file containing CSS processed by both loader configurations. Furthermore, I actually need to configure the loaders in different ways.

I sincerely want to apologize for rehashing what appears to be the same topic, but I legitimately believe this may be a different use case.

Here is an even more extreme pared down version example of something I tried to do:

{
    // CSS modules
    test: /\.css$/,
    exclude: [/_\w+\.css/],
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                // Enable CSS modules by default on all files
                modules: true,
            },
        },
    ],
},
{
    // Legacy CSS files (no CSS modules)
    test: /_\w+\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            // Note that `options.modules: false` is set here by default
        },
    ],
},

[alexander-akait]

As i said above use splitChunk with test: /_\w+\.css/ and /_\w+\.css$/, and you will have two css chunks based on filename

[alexander-akait]

Please try to do this and if you still can't do this put here example (reproducible test repo with small readme) and i will correct configuration, no need put issue without trying to set it up

[davidli16]

Thanks for the prompt response. I will give it another try!

[davidli16]

Created an updated simplified repro, and it appears MiniCssExtractPlugin does properly extract from multiple rules if included as a loader in each of them (no splitChunk needed). It was definitely only working on the last ruleset last time I tried this out.

Thanks for the help! Seems to be working now!