Missing Vue.js style loader then using dev-server with HMR

[Ovissse]

I noticed that then Vue.js loader is enabled and dev-server is started using --hot the configuration still returns mini-css-extract-plugin loader in sass and css rules.

In Vue.js guide they use vue-style-loader instead of mini-css-extract-plugin then not in production environment

[Ovissse]

Manually replacing loader seems to solve problem

if (Encore.isDevServer()) {
    Encore.configureLoaderRule('sass', (rule) => {
        if (rule.oneOf) {
            rule.oneOf.map((one, key) => {
                one.use.map((use, useKey) => {
                    if (typeof use === 'string' && /[\\\/]mini\-css\-extract\-plugin[\\\/]/.test(use)) {
                        rule.oneOf[key].use[useKey] = 'vue-style-loader';
                    }
                });
            });
        }
    });
    Encore.configureLoaderRule('css', (rule) => {
        if (rule.oneOf) {
            rule.oneOf.map((one, key) => {
                one.use.map((use, useKey) => {
                    if (typeof use === 'string' && /[\\\/]mini\-css\-extract\-plugin[\\\/]/.test(use)) {
                        rule.oneOf[key].use[useKey] = 'vue-style-loader';
                    }
                });
            });
        }
    });
}

[Kocal]

Maybe #3 will help you

[Ovissse]

Maybe #3 will help you

Oh it's ongoing topic, as I see there is option to disable mini-css-extract-plugin, but hooking vue-style-loader is still not available at current time

[Lyrkan]

Oh it's ongoing topic, as I see there is option to disable mini-css-extract-plugin, but hooking vue-style-loader is still not available at current time

You should be fine by simply calling Encore.disableCssExtraction() when the dev-server is enabled.

The vue-style-loader is only a fork of the style-loader that doesn't add much things if you aren't using SSR and looks less maintained than the former... so I don't see many reasons to use it.

[Ovissse]

Sorry for delayed response, calling disableCssExtraction() works. Seems the vue-loader handles HMR then mini-css-extract-plugin is not used