Topic: Custom Theme Issue
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.)
Closed
This topic is closed.
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: Pro
- 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
Related topics
Arkadiusz Idzikowski staff commented 2 years ago
Could you please provide more information about the code inside the
styles.scssfile?CWI_MDB pro premium priority commented 2 years 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);