Module build failed using css-loader while trying to import main.css file

I am trying to use node and vue js in the wordpress plugin.I am struck in the css file import.I am trying add css file into the package.json file. importing css file using css-loader. But i am getting the following error. Also can anyone explain how to post-css in this case.

package.json

    {
  "name": "plugin_toolkit",
  "version": "1.0.0",
  "description": "Simple WordPress plugin that uses Webpack.",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "scripts": {
    "dev": "webpack --mode=development --watch --config webpack-config.js",
    "build": "webpack --mode=production --config webpack-config.js"
  },
  "keywords": [
    "wordpress",
    "webpack",
    "javascript"
  ],
  "author": "Srinitamil",
  "license": "GPL-2.0+",
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "axios": "^0.21.1",
    "babel-loader": "^8.0.4",
    "lodash": "^4.17.11",
    "vue-loader": "15.9.8",
    "vuex": "^3.6.2",
    "css-loader": "^6.2.0",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

web-pack-config-file

// Require path.
const path = require( 'path' );
const { VueLoaderPlugin } = require('vue-loader')


// Configuration object.
const config = {
    // Create the entry points.
    // One for frontend and one for the admin area.
    entry: {
        // frontend and admin will replace the [name] portion of the output config below.
        frontend: './src/front/main.js',
        admin: './src/admin/admin-index.js',

    },

    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ],

    // Create the output files.
    // One for each of our entry points.
    output: {
        // [name] allows for the entry object keys to be used as file names.
        filename: 'js/[name].js',
        // Specify the path to the JS files.
        path: path.resolve( __dirname, 'assets' )
    },

    // Setup a loader to transpile down the latest and great JavaScript so older browsers
    // can understand it.
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // this will apply to both plain `.js` files
            // AND `<script>` blocks in `.vue` files
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

// Export the config object.
module.exports = config;

Vue file

<template>
  <div>
    <app></app>
    <h1> {{ content }} </h1>
  </div>
</template>

<script>
import vue from 'vue';
import app from '../App.vue';
import '../main.css';

export default {
  name: 'Home',
  components: {
    app,
  },
  data() {
    return {
      content: 'tests',
    }
  },
  mounted() {
    this.callthis();
  },
  methods() {
    callthis()
    {
      console.log('saf');
    }
  },
}
</script>

i am getting issue like

ERROR in ./src/front/main.css (./node_modules/css-loader/dist/cjs.js!./src/front/main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/opt/lampp/htdocs/vblog/wp-content/plugins/plugin-toolkit/node_modules/css-loader/dist/index.js:31:27)
 @ ./src/front/main.css 4:14-79
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/front/templates/Home.vue?vue&type=script&lang=js&
 @ ./src/front/templates/Home.vue?vue&type=script&lang=js&
 @ ./src/front/templates/Home.vue
 @ ./src/front/main.js

I am using normal css file, but in webpack config file i have mentioned as vue-loader-css that is the issue.

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
}