Module build failed. Invalid options object.

Hey there,

im currently trying to setup a SPA using Vue.

i have run into a problem when building the project with webpack.

Here my webpack.mix.js:

mix.disableNotifications();

mix.js('resources/js/app.js', 'public/js')
    .copy(['resources/css/fontawesome.css', 'resources/css/fontawesome.min.css'], 'public/css')
    .copy(['resources/js/plugins/jquery.js', 'resources/js/plugins/jquery.min.js',
        'resources/js/plugins/popper.js', 'resources/js/plugins/popper.min.js',
        'resources/js/plugins/bootstrap.bundle.js', 'resources/js/plugins/bootstrap.bundle.min.js'], 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .vue();

And here is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.35.2",
        "sass-loader": "^12.1.0",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "admin-lte": "3.1.0",
        "bootstrap": "^4.6.0",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.6",
        "vue-router": "^3.5.2"
    }
}

And finally this is the error im facing and can seem to find a fix for:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (P:\project_path\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (P:\project_path\node_modules\webpack\lib\NormalModule.js:527:19)
    at Object.loader (P:\project_path\node_modules\css-loader\dist\index.js:31:27)
    at processResult (P:\project_path\node_modules\webpack\lib\NormalModule.js:701:19)
    at P:\project_path\node_modules\webpack\lib\NormalModule.js:807:5
    at P:\project_path\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at P:\project_path\node_modules\loader-runner\lib\LoaderRunner.js:251:18

So now im hoping that anybody here has meet something similar or maybe knows why this is happening ?

Outputs:

npm -v => 7.19.1
node -v => v14.17.2

Thanks in advance :D