vue-loader extract-text-webpack-plugin but webpack 4 needs requires mini-css-extract-plugin

[LeoniePhiline]

Version

14.2.2

Reproduction link

http://example.com# It needs a build setup, since this is vue-loader / webpack specific

Steps to reproduce

Create a webpack 4 vue project.

Attempt to use vue-loader and extact CSS with a supported plugin:

webpack.config.js:

const miniCssExtractPlugin = new MiniCssExtractPlugin({
        filename: '../CSS/[name].css',
        chunkFilename: '../CSS/[id].css',
        sourceMap: !isProduction()
    });

[...]

            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        extractCSS: miniCssExtractPlugin,
                        cssSourceMap: !isProduction(),
                        postcss: {
                            config: postCSSLoaderOptions
                        }
                    }
                },
             ]

What is expected?

The build is expected to succeed. CSS is expected to be extracted by MiniCssExtractPlugin.

What is actually happening?

Build fails:

Module build failed: Error: [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.

The problem: ETWP is not supporting webpack 4:

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701#issuecomment-374551300

---

Yes there is a ETWP beta (@next) which kinda-sorta seems to more-or-less run with webpack 4, BUT the entire project is being abandoned in favour of mini-css-extract-plugin . (Just read
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701#issuecomment-374551300 )

Therefore, we have an unresolvable dependency until vue-loader starts supporting mini-css-extract-plugin to replace extract-text-webpack-plugin.

[JounQin]

You can try to use vue-loader@next .

[yyx990803]

First, extractCSS takes a boolean value. It never allowed you to pass in the plugin to use.

Second, extractCSS is meant as an abstraction over ETWP, but you don't have to use it for extracting CSS. If using the new mini CSS plugin, you can instead configure it via the loaders option by manually configuring the default loaders for css or other langs you are using. (See https://vue-loader.vuejs.org/en/configurations/extract-css.html#manual-configuration)

Or, upgrade to vue-loader 15.

[LeoniePhiline]

@yyx990803

First, extractCSS takes a boolean value. It never allowed you to pass in the plugin to use.

This is false according to the documentation:

The value passed in can be true, or an instance of the plugin (so that you can use multiple instances of the extract plugin for multiple extracted files).
(Source)

Therefore, it would be a _very reasonable assumption_ that from webpack 4 on, vue-loader supports injecting a plugin instance of mini-css-extract-plugin to replace ETWP..

If, as you say, it is possible to instead configure it via the loaders options as default loader for css (or scss) files, then it appears to me that from the start the extractCSS option was entirely useless.

[yyx990803]

Yeah I totally forgot it allowed passing in the plugin. However, the instance passed in must be an instance of WETP, since the new mini css plugin has different usage and they are not interchangeable.

extractCSS was meant as a convenience option because it's easier than configuring loaders individually.

[Gourdbaby]

so,how to resolve this question in the end?

[FranckFreiburger]

ping !