Mixins / Webpack issues after upgrading to Angular 13

Question

After upgrading my project to Angular 13 I'm getting the errors below when I run ng serve. I'm also including both package.json and webpack.config.js files below.

I already tried deleting the node_modules folder and running npm install to no avail.

PACKAGE.JSON

{
  "name": "acentus",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.2.4",
    "@angular/cdk": "^13.2.4",
    "@angular/common": "^13.2.4",
    "@angular/compiler": "^13.2.4",
    "@angular/core": "^13.2.4",
    "@angular/fire": "^7.2.1",
    "@angular/forms": "^13.2.4",
    "@angular/material": "^13.2.4",
    "@angular/platform-browser": "^13.2.4",
    "@angular/platform-browser-dynamic": "^13.2.4",
    "@angular/router": "^13.2.4",
    "@iconify/icons-ic": "^1.0.11",
    "@ngneat/tailwind": "^7.0.3",
    "@ngrx-utils/store": "^0.13.1",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1",
    "@ngrx/store": "^11.0.1",
    "@ngx-loading-bar/core": "~5.1.1",
    "@ngx-loading-bar/router": "~5.1.1",
    "@visurel/iconify-angular": "~11.0.0",
    "apexcharts": "^3.19.2",
    "cleave.js": "^1.6.0",
    "firebase": "^9.4.0",
    "luxon": "^1.24.1",
    "ngx-avatars": "^1.3.1",
    "ngx-take-until-destroy": "^5.4.0",
    "rxjs": "~6.6.0",
    "simplebar": "^5.3.0",
    "tailwindcss": "^3.0.23",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular-devkit/build-angular": "^13.2.5",
    "@angular-eslint/builder": "13.0.0-alpha.1",
    "@angular-eslint/eslint-plugin": "13.0.0-alpha.1",
    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.1",
    "@angular-eslint/schematics": "13.0.0-alpha.1",
    "@angular-eslint/template-parser": "13.0.0-alpha.1",
    "@angular/cli": "^13.2.5",
    "@angular/compiler-cli": "^13.2.4",
    "@fullhuman/purgecss-loader": "^1.0.0",
    "@ngrx/store-devtools": "^11.0.1",
    "@types/cleave.js": "^1.4.2",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/luxon": "^1.24.0",
    "@types/node": "^12.11.1",
    "@types/simplebar": "^5.1.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "codelyzer": "^6.0.0",
    "eslint": "^8.2.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.14",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "postcss-loader": "^3.0.0",
    "postcss-scss": "^2.1.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.5.5"
  }
}

WEBPACK.CONFIG.JS

const path = require('path');

let sassImplementation;
try {
  // tslint:disable-next-line:no-implicit-dependencies
  sassImplementation = require('node-sass');
} catch {
  sassImplementation = require('sass');
}

module.exports = {
  // Fix for: https://github.com/recharts/recharts/issues/1463
  resolve: {
    fallback: {
      fs: false
    }
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: () => [
                require('tailwindcss')
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sassImplementation,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};