extract-text-webpack-plugin如何將css分文件提取

在使用extract-text-webpack-plugin插件進(jìn)行css文件提取的時(shí)候，發(fā)現(xiàn)的所使用的的css文件，less文件，嵌入樣式都會(huì)壓縮打包至css/main.css文件中，，但是我想要分開css文件進(jìn)行打包，并且自定義文件名稱，，為什么不可以呢？
下面是配置文件：

var path = require('path')
var webpack = require('webpack')
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');
const ExtractTextPlugin=require("extract-text-webpack-plugin");
const ExtractCSS = new ExtractTextPlugin({
            filename: 'css/[name].css' //路徑以及命名
        });
const ExtractLESS = new ExtractTextPlugin({
            filename: 'css/[name].css' //路徑以及命名
        });
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build-[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        /*use: [
          'vue-style-loader',
          'css-loader'
        ],*/
       loader: ExtractCSS.extract({ fallback: 'style-loader', use: 'css-loader' }),
                exclude: /node_modules/,
      },     
        {
       test:/\.less$/,
             use:ExtractLESS.extract({ //分離less編譯后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            }),
              exclude: /node_modules/,
      },  
       {
        test: /\.vue$/,
        loader: 'vue-loader',
         options: {
                    loaders: {
                        less: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!less-loader' }),
                        css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' })
                    }
                    // other vue-loader options go here
                }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]',
          limit:'1024',
          outputPath:'img/'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    contentBase:'./dist',
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    port:'6001'
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
if (process.env.NODE_ENV === 'development') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
     new webpack.HotModuleReplacementPlugin(),
    new webpack.BannerPlugin('版權(quán)所有'),
    new HtmlWebpackPlugin({
      title:"使用靜態(tài)資源版權(quán)管理",
      filename:'./index.html',
      template:__dirname+'/src/index.temp.html'
    }),
    new CleanWebpackPlugin('dist', {
      root: __dirname,
      verbose: true,
      dry: false
  }),
  ExtractCSS,
  ExtractLESS
    ])
}

下面是打包的源文件目錄：

可見是有一個(gè)css文件和一個(gè)less文件
下面是打包后的文件目錄

可見打包后只有一個(gè)css文件，文件內(nèi)容是源文件中的所有css樣式總和的壓縮文件。如何才能實(shí)現(xiàn)分文件提取呢？