Material Design 选项卡-Indicator Mixin 未定义

问题描述

我第一次尝试了材料设计，并且正在努力使标签指示器工作的混合。我是这个框架的新手并使用 sass，所以我确定我遗漏了一些东西。

App.scss 看起来像这样：

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

当我编译文件时，我不断收到错误：

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

我不知道如何解决这个问题，因为我找到的所有文档和其他解决方案（例如 What does "use this SASS mixin" mean in the context of Material Design Components?）都表明这应该有效。

缺少什么？

解决方法

这里有很多问题：

1. @use 为导入的成员添加命名空间，请参阅 @use 文档。所以你应该在 mixin 前面加上命名空间。

2. 不推荐的做法是使用与现有 MDC 类相同的方式命名您的类 - .mdc-tab-indicator。创建新名称并将其添加到选项卡指示器 html 元素中。

3. MDC 包有两种方法可以将它们包含到您的 SASS 文件中：

   // 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";
   

   我的猜测是您需要两者，因为您需要基本的 mdc-tab-indicator CSS 类。另外，您想使用 mixins 创建自定义选项卡指示器。

所以最后的结果是这样的：

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

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