How to fix a broken vuejs project after adding "less" and "less-loader" module

I had recently created a simple vuejs project using IntelliJ and wanted to start using less with it. But after running "npm install -D less less-loader" I'm getting an error and I'm unable to untangle it. I tried downgrading both webpack and the less-loader but it just causes more errors at this point.

The versions at play are:

vue: @vue/cli 4.5.13

node: v16.3.0.

webpack: 5.38.1

less: 4.1.1

less-loader: 9.1.0

The aforementioned error:

     INFO  Starting development server...
 ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
   "exclude": [
           null
             ],
       "use": [
              {
      "loader": "C:...\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\cache-loader\\dis
t\\cjs.js",
      "options": {
        "cacheDirectory": "C:...\\node_modules\\.cache\\babel-loader",
        "cacheIdentifier": "2aa78f64"
             },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
             },
              {
      "loader": "C:...\\node_modules\\babel-loader\\lib\\index.js",
      "options": "undefined",
      "ident": "undefined"
              }
              ]
              }

You need to install the v7 of less-loader if you're using Webpack4. Hence try

less-loader@^7

And follow this configuration: https://vue-loader.vuejs.org/guide/pre-processors.html#less