Bootstrap Issue with Mix

I'm not sure if this is a Mix issue or a Bootstrap issue or my lack of sleep.

I can't get just bootstrap to compile for some reason.

Windows machine running homestead, doing the compile in the vm or host doesn't matter.

The Error

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/sass-loader/dist/cjs.js):
SassError: 0.2rem and 0 are incompatible.
  ╷
9 │       $return: append($return, max($value, 0));
  │                                    ^^^^^^ 0.2rem
  │                                            ━ 0
  ╵
  node_modules\bootstrap\scss\mixins\_border-radius.scss 9:36   valid-radius()
  node_modules\bootstrap\scss\mixins\_border-radius.scss 20:20  border-radius()
  node_modules\bootstrap\scss\_reboot.scss 322:3                @import
  node_modules\bootstrap\scss\bootstrap.scss 17:9               @import
  resources\sass\app.scss 1:9                                   root stylesheet
    at processResult (node_modules\webpack\lib\NormalModule.js:721:19)
    at node_modules\webpack\lib\NormalModule.js:827:5
    at node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at node_modules\sass-loader\dist\index.js:54:7
    at Function.call (node_modules\sass\sass.dart.js:95525:16)
    at _render_closure1.call (node_modules\sass\sass.dart.js:83704:12)
    at _RootZone.runBinary (node_modules\sass\sass.dart.js:28038:18)
    at _FutureListener.handleError (node_modules\sass\sass.dart.js:26568:21)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

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": {
        "@popperjs/core": "^2.10.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.21",
        "bootstrap": "^5.1.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.40.0",
        "sass-loader": "^12.1.0",
        "tailwindcss": "^2.0.2"
    },
    "dependencies": {}
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css/styles.css');