vue-cli3 配置 extract: true打包后，失效。 奇怪啊

Question

vue.cconfig.js代码如何下
const path = require("path");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
/** 区分打包环境与开发环境

• process.env.NODE_ENV==='production' (打包环境)
• process.env.NODE_ENV==='development' (开发环境)
• baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',

*/
// 基本路径
publicPath: '',
// 输出文件目录
outputDir: 'dist',
assetsDir: 'static',
indexPath: 'index.html', //输出访问默认路径
// eslint-loader 是否在保存的时候检查
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/in...
runtimeCompiler: true,
// webpack配置
// see https://github.com/vuejs/vue-...
// chainWebpack: () => {},
lintOnSave: false,
css: {

// 是否使用css分离插件 ExtractTextPlugin
extract: true,

},
filenameHashing: true, // 静态资源是否hash
chainWebpack: (config) => {

config.plugins.delete('prefetch');
config.output
  .jsonpFunction('webpackJsonp_saas_fe');
config.module
.rule("image-webpack-loader")
.test(/\.(gif|png|jpe?g|svg|jpg)$/i)
.use('file-loader')
.loader("image-webpack-loader")
.tap(() => ({
  pngquant:{
    quality:[0.3, 0.5],
    speed:7,
  },
  disable: process.env.NODE_ENV !== "production",
}))
.end();
// file 在4.3.0之后，默认开启esmodule=true，本版本使用5.0.2，应当关闭
let rules=['images','media','fonts'];
for(var i=0;i<rules.length;i++){
  config.module
  .rule(rules[i])
  .use('url-loader')
    .loader('url-loader')
    .tap(options => {
      // 修改它的选项...
      options.fallback.options.esModule=false
      return options
    }).end();
} 

},
configureWebpack: (config) => {

config.devtool = isProduction ? 'cheap-module-source-map' : 'cheap-module-eval-source-map';
if (isProduction) {
  // 
  config.optimization.splitChunks= {
    chunks: 'all', //同时分割同步和异步代码,推荐。
  }
  const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
  config.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: productionGzipExtensions,
      threshold: 10240,
      minRatio: 0.8,
    }),
  )
} else {
  // 开发环境配置
}

},
// vue-loader 配置项
// https://vue-loader.vuejs.org/...
// vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
parallel: require('os').cpus().length > 1, //

devServer: {

open: process.platform === 'darwin',
host: '0.0.0.0',
port: 9050,
https: false,
hotOnly: false,
overlay: {
  warnings: false,
  errors: true
},
headers: {
  "Access-Control-Allow-Origin": "*",
},
before: app => {},
proxy: ''

},
pluginOptions: {

'style-resources-loader': {
  preProcessor: 'less',
  patterns: [
    path.resolve(__dirname, "src/style/common.less")
  ]
}

}
}

以上整个vue.config.js整个配置中，我设置了
css: {

extract: true,

},
也没用，通过vue inspect 查看，没有调用 mini-css-extract-plugin 插件。然后我通过另一个项目vue.config.js中设置
css: {

extract: true,

}
确认能单独打包出CSS文件出来。 我对比了2个项目的vue-cli 版本 都是4.2.2。
另一个项目唯一不同就是没有使用style-resources-loader 。
求问大神，难道这里的style-resources-loader 会影响CSS独立打包配置么？

打包结果如图：没有CSS 独立文件。

Answer 1

经过对比，升级版本后，依旧不行，设置了extract为true后，vue inspect 依旧没有改变，增加分离插件。