Topic: mdb-theme not being recognized

stokkup2313 priority asked 11 months ago


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"
  }

Arkadiusz Idzikowski staff answered 11 months ago


You need to upgrade your MDB version in order to use this feature. Theming functions and mixins have been added in v1.1.0.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0
  • Device: MacOS
  • Browser: Google Chrome
  • OS: macOS Monterey 12.6.3
  • Provided sample code: Yes
  • Provided link: No