Undefined mixin

[ybarbaria]

I've updated ny angular application to the 9.0.2 version. Since that I have an scss error from your library. I can't compile my app anymore.

ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined 
@include base-mixins.emit-once("mdc-ripple/common/animation") {       
@include keyframes.keyframes_; }
  node_modules\@material\ripple\_mixins.scss 79:5             @content
  node_modules\@material\feature-targeting\_mixins.scss 41:5  targets()
  node_modules\@material\ripple\_mixins.scss 78:3             common()
  node_modules\@material\button\_mixins.scss 140:3            ripple()
  node_modules\@material\button\_mixins.scss 43:3             core-styles()
  node_modules\@material\button\mdc-button.scss 24:1          @use
 styles.scss 10:1
                  root stylesheet

To Reproduce Steps to reproduce the behavior:

1. Install angular 9.0.2 2 Install "material-components-web": "5.1.0", and "@angular-mdc/web": "5.1.0"
2. Add "stylePreprocessorOptions": { "includePaths": ["node_modules/"] }, to the angular.json file
3. Add this lines into your styles.scss of your angular app. @use '@material/theme' with ( $primary: #435563, $secondary: #388e3c, $background: #fff, ); @use '@material/typography/mdc-typography'; @use '@angular-mdc/theme/material'; @use '@material/button/mdc-button'; @use '@material/snackbar/mdc-snackbar'; @use '@material/snackbar/_index' as snackbar; @use '@material/theme/color-palette' as material-color;

Expected behavior I expect to be able to launch my angular 9 app and be able to use the mdc-button.

What Angular MDC version are you using? 5.1.0

What OS are you using?: Windows 10 Pro Node v12.14.1 Npm 6.13.4 Angular CLI: 9.0.2

[lsalazarm99]

I think you should put @use '@material/typography/mdc-typography'; after @use '@angular-mdc/theme/material'.

Also, I'm not sure about this, but have you tried using @use 'material-components-web/material-components-web';? It automatically imports all Material Components' SASS files. If you don't use all of them this is not good for production but you can try it.

[trimox]

Closing.