Material 设计选项卡-指示器混合未定义

Question

我一直在尝试 material 设计，并且正在努力让 tab-indicator 工作的 mixins。我是这个框架的新手，正在使用 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

我不确定如何解决这个问题，因为我找到的所有文档和其他解决方案（例如）都表明这应该有效。

缺少什么？

Answer 1

这里有很多问题：

@use 将命名空间添加到导入的成员中，请参阅 @use 文档。所以你应该在 mixin 前加上命名空间。
不推荐的做法是将您的 class 命名为与现有 MDC class - .mdc-tab-indicator 相同的方式.创建新名称并将其添加到选项卡指示器 html 元素中。

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 classes。另外，您想使用 mixin 来创建自定义选项卡指示器。

所以最终结果是这样的：


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

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

Material 设计选项卡-指示器混合未定义

Material Design tab-Indicator Mixin Undefined

material-design

material-components

mdc-components

material-components-web