Vue.js CLI 3 - how can I create a vendor bundle for CSS/Sass?

The vue.config.js also lets you use a chainWebpack method. It might be preferable because it allows you to modify the vue-cli config. Using configureWebpack overwrites the default config entirely, which might be part of the problem in regards to getting yours to work with Sass.

This config is for pure CSS only, but is fairly similar to what you have.

Just tried this with some Sass embedded into some style blocks, and it breaks up the vendor css from the app css.

module.exports = {
    chainWebpack(config) {
        config
            .output.chunkFilename('[name].bundle.js').end()
            .optimization.splitChunks({
                cacheGroups: {
                    vendorStyles: {
                        name: 'vendor',
                        test(module) {
                            return (
                                /node_modules/.test(module.context) &&
                                // do not externalize if the request is a CSS file
                                !/\.css$/.test(module.request)
                            );
                        },
                        chunks: 'all',
                        enforce: true
                    }
                }
            });
    }
};

Update

It's also necessary to pull out your @import '../node_modules/minireset.css/minireset.sass'; and other import statements out of the style block and put it in the script block of your vue component:

// your component file
<script>
    import "minireset.css/minireset.sass";
    // rest of script
</script>

The file will still be imported and used in your style block below.

My exports include a vendor.[hash].css and an app.[hash].css file. The app file has the content of the style blocks. Since I kept my test app simple and to your use case, the vendor file contains only the style info from minireset:

// vendor.[hash].css
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

Git repo of vue app here. The import of the sass file is in HelloWorld.vue.