I use the plug-in mini-css-extract-plugin to extract less files and css as separate files, which were introduced during development, but after packaging, they will not generate css files, all in accordance with the online configuration, can anyone help me to answer them? Thank you! It"s the vue project.

introduced screenshot:

my full webpack.config.prod.js:

const baseConfig = require("./webpack.config.base")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const merge = require("webpack-merge")
const path = require("path")
const productionConfig = merge(baseConfig, {
  mode: "production",
  entry: {
    app: path.join(__dirname, "../src/index.js"),
    vendor: ["vue", "vue-router", "vuex", "axios", "element-ui"]
  },
  output: {
    path: path.join(__dirname, "../build/public"),
    filename: "js/[name].bundle.js",
    chunkFilename: "js/[name].[chunkhash:8].chunk.js",
    publicPath: "./public"
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ],
        include: [
          path.resolve(__dirname, "node_modules")
        ]
      },
      {
        test: /\.less/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader"
        ],
        include: [
          path.resolve(__dirname, "node_modules")
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024,
              name: "[name].[hash:8].[ext]",
              publicPath: "./public/img",
              outputPath: "/img"
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "file-loader",
        options: {
          limit: 80000,
          name: "[name].[hash:8].[ext]",
          publicPath: "./public/fonts",
          outputPath: "/fonts"
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all"
        }
      }
    },
    runtimeChunk: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[chunkhash:8].css",
      chunkFilename: "[id].css"
    })
  ]
})
module.exports = productionConfig