Material Design tab-Indicator Mixin Undefined

Question

I've been trying out material design for the first time and am struggling to get mixins for the tab-indicator to work. I'm new to this framework and using sass so I'm sure I'm missing something.

App.scss looks like this:

@use "@material/theme" with (
    $primary: #33302d,
    $secondary: #d6c266,
    $on-primary: #d6d6d6,
    $on-secondary: #000000,
);

@use '@material/button/mdc-button';
@use '@material/button';
@use "@material/icon-button";
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/tab-bar/mdc-tab-bar";
@use "@material/tab-scroller/mdc-tab-scroller";
@use "@material/tab-indicator/mdc-tab-indicator";
@use "@material/tab/mdc-tab";

@include icon-button.core-styles;

body {
    color: red;
    margin: 0 0 0 0;
};

.mdc-tab-indicator {
    @include underline-color(orange);
};

And when I compile the file, I keep getting the error:

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
25 │     @include underline-color(orange);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  app.scss 25:5  root stylesheet

I'm not sure how to trouble-shoot this, as all the documentation I've found and other solutions (e.g. What does "use this SASS mixin" mean in the context of Material Design Components?) indicate this should work.

What's missing?

Answer 1

There are a number of problems here:

1. @use adds namespace to imported members, see @use docs. So you should prefix mixin with the namespace.

2. It is not recommended practice to name your class the same way as existing MDC class - .mdc-tab-indicator. Create new name and add it to your tab indicator html element.

3. MDC packages have two ways of including them into your SASS-file:

   // This will add all mdc-tab-indicator classes to your CSS
   @use "@material/tab-indicator/mdc-tab-indicator";
   
   // This will include mixins and variables, but will not add classes to CSS.
   // It is useful if your SASS is broken down into multiple smaller SASS files
   // and you don't want duplicate mdc-tab-indicator CSS each time you add @use.
   @use "@material/tab-indicator";
   

   My guess is that you need both, since you need base mdc-tab-indicator CSS classes. Plus you want to use mixins to create customized tab indicator.

So the final result looks like this:

@use "@material/tab-indicator";
@use "@material/tab-indicator/mdc-tab-indicator";

.my-tab-indicator {
    @include tab-indicator.underline-color(orange);
};