Hello! I'm currently working with an older angular application that is running MDB #1.0.0

"mdb-angular-ui-kit": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential#1.0.0",

*Expected behavior*i'm currently getting a mixin error related to my mdb-theme in my styles.scss file. How can I fix this error?

Actual behavior

Resources (screenshots, code snippets etc.)

Error:

./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named mdb-theme
        on line 19 of src/styles.scss
 @include mdb-theme($my-theme);

styles.scss

/* You can add global styles to this file, and also import other style files */
@import "./assets/styles/constants.scss";
// // MDB SCSS
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
// Font Awesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
// Plugins
@import '~mdb-angular-file-upload/scss/file-upload.scss'; // plugin

$my-theme-primary: #032b49; // theme primary color, change this value to customize theme
$my-theme-secondary: #39C0ED; // theme secondary color, change this value to customize theme
$my-theme-surface: #032b49;
$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

package.json

  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@apollo/client": "^3.0.0",
    "@decahedron/entity": "^2.9.0",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@ngrx/effects": "^11.1.1",
    "@ngrx/entity": "^11.1.1",
    "@ngrx/router-store": "^11.1.1",
    "@ngrx/store": "^11.1.1",
    "@ngrx/store-devtools": "^11.1.1",
    "angular-bootstrap-md": "^15.0.0",
    "apollo-angular": "^2.6.0",
    "aws-sdk": "^2.1098.0",
    "chart.js": "^3.1.1",
    "graphql": "^15.0.0",
    "mat-table-exporter": "^9.0.2",
    "mat-table-filter": "^9.0.1",
    "mdb-angular-file-upload": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/file-upload#1.0.0",
    "mdb-angular-ui-kit": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential#1.0.0",
    "ngrx-store-logger": "^0.2.4",
    "ngx-spinner": "^10.0.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-builders/jest": "10.0.1",
    "@angular-devkit/build-angular": "^0.1102.14",
    "@angular/cli": "^11.2.14",
    "@angular/compiler-cli": "~11.2.14",
    "@ngrx/schematics": "^11.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "26.0.15",
    "@types/node": "^12.20.47",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "26.6.3",
    "lite-server": "^2.6.1",
    "node-sass": "^5.0.0",
    "protractor": "~7.0.0",
    "sass-loader": "^13.2.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.6"
  }