How to extract css into separate files by extract-text-webpack-plugin

when using the extract-text-webpack-plugin plug-in to extract css files, the css files, less files, and embedded styles found will be compressed and packaged into css/main.css files, but I want to package the css files separately and customize the file name, why not?
here is the configuration file:

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({ //lesscss
                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: "-sharpeval-source-map",
}

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "-sharpsource-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 = "-sharpsource-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(""),
    new HtmlWebpackPlugin({
      title:"",
      filename:"./index.html",
      template:__dirname+"/src/index.temp.html"
    }),
    new CleanWebpackPlugin("dist", {
      root: __dirname,
      verbose: true,
      dry: false
  }),
  ExtractCSS,
  ExtractLESS
    ])
}

the following is the packaged source file directory:

clipboard.png

cssless

clipboard.png

it can be seen that there is only one css file after packaging, and the content of the file is the compressed file of the sum of all the css styles in the source file. How can we achieve sub-file extraction?

Mar.07,2021

ignore the answer first and misunderstand the meaning

plugins: [
  new ExtractTextPlugin({
    filename:  (getPath) => {
      return getPath('css/[name].css').replace('css/js', 'css');
    }
  })
]
Menu