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

Version

14.2.2

Reproduction link

[http://example.com# It needs a build setup, since this is vue-loader / webpack specific](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.

[Gourdbaby]

so,how to resolve this question in the end?

[FranckFreiburger]

ping !