请问vue-cli 4.x中，怎么把.vue文件的style样式都打包到一个css文件中？

Question

在我安装的这个版本的@vue/cli 4.2.3，我的vue.congif.js基本采用系统默认的配置

vue.config.js

const path = require('path')

module.exports = {
    devServer: {
        open: false,
        overlay: {
            warnings: false,
            errors: true
        }
    },
    chainWebpack(config) {
        // 在这里我把prefetch去掉了
        config.plugins.delete('prefetch')
        config.when(process.env.NODE_ENV === 'production', config => {
            config.optimization.splitChunks({
                chunks: 'all'
            })
        })
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@$': path.resolve('src')
            }
        }
    },
    publicPath: '/',
    lintOnSave: process.env.NODE_ENV !== 'production',
    productionSourceMap: false
}

打包截图

每一个.vue组件的style都被剥离出来成为单独的css，这样看起来用到时加载很节省带宽，我把prefetch预加载去掉了，但是实际体验中，会存在一些动态显示的组件主线短暂空白，在一个复杂的组件里，比如多个tab，一次性要加载js和css的数量达到10个，空白甚至能达到1秒
我尝试很多网上的方法
其中
vava熊的方法

//!多个css chunk合并成一个css文件 
styles: { 
    name: 'styles', 
    test: /\.(scss|sass|less|css)$/, 
    chunks: 'all', 
    minChunks: 1, 
    reuseExistingChunk: true 
}

并不能把vue里的style合并到一起
所以请问怎么配置才可以把vue的style合并到一个css内？谢谢了