vuejs - Create detached css file from apps.css

Question

version 4.3 of vue cli is in use.
I hope the external css file will be created separately after the build.
I have to use that file somewhere else.

**current result** 
root
  ┗dist
    ┗css
      ┗app.dsfe23f.css  
    ┗js
      ┗app.ds3fe23f.js
      ┗app.ds1fe23f.map
      ┗chunk-vendors.ds3fe23f.js
      ┗chunk-vendors.ds1fe23f.map   
  ┗public
    ┗index.html
  ┗src
    ┗assets
      ┗css
        ┗GiftStyle.css
    ┗router
      ┗index.js 
    ┗view
      ┗Home.vue
      ┗Gift.vue
    ┗App.vue
    ┗main.vue

**What I want** 
root
  ┗dist
    ┗css
      ┗app.dsfe23f.css
      ┗GiftStyle.dsf231.css  
    ┗js
      ┗app.ds3fe23f.js
      ┗app.ds1fe23f.map
      ┗chunk-vendors.ds3fe23f.js
      ┗chunk-vendors.ds1fe23f.map   
  ┗public
    ┗index.html
  ┗src
    ┗assets
      ┗css
        ┗GiftStyle.css
    ┗router
      ┗index.js 
    ┗view
      ┗Home.vue
      ┗Gift.vue
    ┗App.vue
    ┗main.vue

*****vue.config.js 
const ExtractTextPlugin = require('mini-css-extract-plugin')

module.exports = {
  
  chainWebpack: config => { config.plugin('extract-css').use(ExtractTextPlugin, [{
        filename:  'css/[name].css',
        allChunks: true
      }])
    
  },
  configureWebpack:{
    
    
  },
  
  assetsDir: 'resources'  
}