search

creativetimofficial / material-dashboard-angular2

Material Dashboard Angular
https://demos.creative-tim.com/material-dashboard-angular2/
MIT License
1.01k stars 2.09k forks source link

[Bug] SassError: Undefined mixin. #126

Open RameshW1 opened 2 years ago

RameshW1 commented 2 years ago

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

Screenshot 2022-07-06 at 3 36 30 PM
rarestoma commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

nevseev commented 1 year ago

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

nevseev commented 1 year ago

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

150

PKReejesh commented 6 months ago

@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-heightparameter 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