Topic: Custom Theme Issue

CWI_MDB priority asked 1 week ago


Hi,

I generated a new application using ng new, then imported the MDB UI kit, added one component and then attempted to alter the theme before running into this issue.

Expected behavior App to build

Actual behavior

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
15 │ @include mdb-theme($my-theme);
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles.scss 15:1  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
15 │ @include mdb-theme($my-theme);
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
      src\styles.scss 15:1  root stylesheet

× Failed to compile.

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff commented 1 week ago

Could you please provide more information about the code inside the styles.scss file?


CWI_MDB priority commented 1 week ago

/* You can add global styles to this file, and also import other style files */ @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';

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

$my-theme-primary: #4acbbb; // theme primary color, change this value to customize theme $my-theme-secondary: #d72c8e; // theme secondary color, change this value to customize theme

$my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary); // create the new dark theme using primary and secondary colors

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


CWI_MDB priority answered 1 week ago


Please close, I have managed to resolve the issue.


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Mac Studio
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No