[Bug] SassError: Undefined mixin.

[RameshW1]

Version

Angular 12

Reproduction link

Operating System

Mac

Device

mac

Browser & Version

Safari 15.2

Steps to reproduce

I am implementing this material dashboard in our project while implementing compile time error is coming like this below.
Could you please help me out on this issue?

./src/assets/scss/material-dashboard.scss - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
7 │ ┌ @include hover {
8 │ │ color: $color;
9 │ │ background-color: $focus-background;
10 │ │ border-color: $focus-border;
11 │ └ }

What is expected?

Need to resolve this issue

What is actually happening?

While compelling itself it is coming this error.

---

Solution

Additional comments

[rarestoma]

Hi @RameshW1,

Thank you for working with our products.

Did you modify something to the product? Also, what version of node are you using?

Thank you,
Rares

[RameshW1]

Hi @rarestoma ,
Thank you for your support.
Yes. I am integrating this design to my project while integrating I am getting this error.
In package.json I have added all the library and I have added the css files also in the "assets" folder.

Node Version: v14.17.6

[estebanrepupilli]

Same issue here.
Tried everything at hand but couldn't resolve.
Can anyone help with this?

[nevseev]

Experiencing exact same issue with Angular 16 under Node v18. Has anyone found a solution for it yet?

[nevseev]

I've create a pull request to fix the above issue:

#150

[PKReejesh]

@nevseev your additions to the src/assets/scss/core/mixins/_hover.scss helped resolve the issue.

Additionally, in my version, I had to update

1. Update button-size in src/assets/scss/core/_button.scss, removed $btn-lg-line-height parameter to match the definition.

2. ng add @angular/material
   and
   @import "@angular/material/prebuilt-themes/indigo-pink.css"
   in src/assets/scss/material-dashboard.scss