Vue build Generating CSS file twice when using Webpack & PurgeCSS

Question

Hello everyone I am trying to create a build for my vue 2 project and I am using the purge css for removing the unused css it's almost working properly only help I need is I don't know why it is generating all css file twice. below is my script code that I have used to create the build

{
    "scripts": {
        "serve-s": "vue-cli-service serve --mode staging"
    }
}

below is my code of the vue.config.js file

let { defineConfig } = require("@vue/cli-service");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
let $path = require("path");

const PATHS = {
  src: $path.join(__dirname, "src"),
};

const glob = require("glob");

let $env = process.env;
let $configs = Object();

$configs.publicPath = $env.VUE_APP_PUBLIC_PATH;
$configs.transpileDependencies = false;

$configs.devServer = {
  host: $env.VUE_APP_HOST,
  port: $env.VUE_APP_PORT,
  https: $env.VUE_APP_HTTPS == "true" ? true : false,
};

$configs.css = {
  extract: { ignoreOrder: true },
};

// $configs.outputDir = $path.resolve(__dirname, "../v2/")

function collectSafelist() {
  return {
    standard: ["safelisted", /^safelisted-/],
    deep: [/^safelisted-deep-/],
    greedy: [/^safelisted-greedy/],
  };
}

if ($env.VUE_APP_BUILD_CHUNK == "true") {
  $configs.configureWebpack = {
    mode: "production",
    devtool: false,
    output: {
      filename: "js/sp_1_[name].[contenthash:8].js?V2." + Date.now(),
      chunkFilename: "js/sp_2_[name].[contenthash:4].js?V2." + Date.now(),
    },
    optimization: {
      nodeEnv: "production",
      minimize: true,
      splitChunks: {
        chunks: "all",
        minSize: 102400,
        maxSize: 153600,
        enforceSizeThreshold: 153600,
      },
    },
    module: {
      rules: [
        {
          test: `/\.(scss|css)$/`,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader", // translates CSS into CommonJS
              options: {
                importLoaders: 1,
              },
            },
            // "postcss-loader",
            "sass-loader",
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "css/min_[name].css",
      }),
      new PurgeCSSPlugin({
        paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
        // content: [`./public/**/*.html`, `${PATHS.src}/**/*`, `*.js`],
        safelist: [
          ".desktop_view",
          ".mobile_view",
          "desktop_view",
          "mobile_view",
        ],
        whitelist: ["desktop_view", "mobile_view"],
        fontFace: true,
        keyframes: true,
        variables: true,
        rejected: true,
      }),
    ],
  };
}

module.exports = defineConfig($configs);