材料设计选项卡-指标混合未定义

Question

我第一次尝试了材料设计，我正在努力让标签指示器的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

我不确定如何解决这个问题，因为我找到的所有文档和其他解决方案(例如"什么使用这个SASS混合");意思是在材料设计组件的背景下?)表明这应该是可行的。

缺失的是什么?

Answer 1

这里有很多问题:

1. @use为导入的成员添加命名空间，参见@use docs。所以你应该在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);
};