mdc-fab mixin not found after update to angular 9 / angular mdc 5.0.0 canary

[gpulido]

Describe the bug
I'm trying to update my project to use angular 9 so I updated also angular-mdc-web to 5.0.0 canary.
I have just removed the node_modules, made a fresh npm install and after running ng serve I'm receiving the following error:

ERROR in ./src/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/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
4 │   @include mixins.extended-fluid;
  │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular-mdc\theme\extend\mdc-fab.scss 4:3  @use
  node_modules\@angular-mdc\theme\material.scss 2:1        @import
  src\styles\app.scss 5:9                                  @import
  <path_redacted>\archery-annotation\src\styles.scss 2:9                                                root stylesheet

Where app.scss:

@import "./color-palette";
@import "./global";

@import "~@angular-mdc/theme/material";

What Angular MDC version are you using?
5.0.0-canary.cc1e3fb

What OS are you using?:
Windows 10

[MarvKaiser]

Same problem here with 5.0.0-canary.cc1e3fb for mdc-tab on Windows 10

ERROR in ./src/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.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 1 │ @use '@material/tab/mixins'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@angular-mdc\theme\extend\mdc-tab.scss 1:1 @import <path>\src\styles.scss 15:9 root stylesheet

[gpulido]

MOre info,
After adding

 "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles",
                "node_modules/"
              ]
            },

The error changed, now I can't not use any mixin inside the components like:

@use 'app';

.demo-card__subtitle {
  @include mdc-theme-prop(color, text-secondary-on-background);
  margin: 0;
}

ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
18 │   @include mdc-theme-prop(color, text-secondary-on-background);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  <redacted>\pure-tournament-card.component.scss 18:3  root stylesheet

[trimox]

@gpulido @MarvKaiser MDC Sass modules are used for canary branch. Keep your eye on PR #2041 to be merged, it includes guide for Sass changes.

Edit: Also, canary tag changes as of today, https://github.com/trimox/angular-mdc-web/blob/aec693a1d107ef520bc5a444c5abfcef5610ec85/CHANGELOG.md

[trimox]

Merged. Please reference latest documentation from 3.2.1 to 5.0 a lot has changed.

[gpulido]

Hello,
First of all, thanks for the continuous work.
I have been foolowing your changes since yesterday trying to figure out how to make it work using your own demo app styles configuration.
I'm a novice on sass and sass mixis and modules, but I guess that when the documentaiton says for a component:

styles 
@use '@material/button/mdc-button';
@use '@material/button';

I guess that those lines has to be added to the scss of the angular component that uses the button.
Then in such scss you can modify the values using the mixins defined on each of the mdc components.
Am I right?

However I'm having some compilation troubles as I have a header angular component like this:
header.component.html

<mdc-top-app-bar fixed>
  <mdc-top-app-bar-row>
    <mdc-top-app-bar-section align="start" title="Archery Annotation">
      <div fxHide.gt-xs>
        <button mdcTopAppBarNavIcon (click)="onToggleSidenav()">
          <mdc-icon>menu</mdc-icon>
        </button>
      </div>
      <div>
        <a routerLink="/">
          <mdc-ripple [attachTo]="logo">
            <img
              #logo
              alt="Home"
              height="40"
              src="assets/logo.svg"
              title="Home"
              width="40"
            />
          </mdc-ripple>
        </a>
      </div>
    </mdc-top-app-bar-section>
  </mdc-top-app-bar-row>
</mdc-top-app-bar>

So I added the following to the header.component.scss

@use '@material/top-app-bar/mdc-top-app-bar';
@use '@material/top-app-bar';

But I'm receiving a:

RROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @use '@material/top-app-bar';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
 /src/app/navigation/header/header.component.scss 2:1  root stylesheet

If I remove the @use '@material/top-app-bar' it seems to work.

The style is being configured as explained on the 5.0.0. getting started doc
What am I missing?
Thanks for the help

[trimox]

Try temporary workaround, investigating as possible sass-loader problem,
@use '@material/top-app-bar/mdc-top-app-bar';
@use '@material/top-app-bar/_index' as top-app-bar;

That'll move ya past SassError. If you need to, you could also bring in at a top level,
@use '@material/typography/mdc-typography';

reference sass issues material-components/material-components-web#5546

[gpulido]

Hello, the _index seems to work.
Regardint the typography I added it on the body and on the main style loader and seems also to work.
Thank you!

[trimox]

@gpulido Great! I'll update the guide to include typography