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?

Konstantin Lyakh · Accepted Answer · 2021-01-25T11:48:38.307

There are a number of problems here:

@use adds namespace to imported members, see @use docs. So you should prefix mixin with the namespace.
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.

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);
};

Thanks for the documentation link, it's helped me understand more about SASS. Unfortunately, I'm still getting the same error message using this with the namespace. — AnKo, Jan 25 '21 at 06:14
@AnKo I took another look at the problem and updated the answer with additional details. Notice I changed class name and namespace. Just in case, here is working example. It doesn't render tab-indicator, but it compiles - https://codesandbox.io/s/tab-indicator-test-ntfo8?file=/src/app.scss — Konstantin Lyakh, Jan 25 '21 at 11:45

Material Design tab-Indicator Mixin Undefined

1 Answers1