Вкладка Material Design - индикатор 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

Я не уверен, как это исправить, поскольку вся документация, которую я нашел, и другие решения (например, Что означает использование этого микшина SASS в контексте компонентов дизайна материалов?) указывает на то, что это должно работать.

Чего не хватает?


material-design material-components material-components-web mdc-components
person AnKo    schedule 19.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Здесь есть ряд проблем:

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

    Я предполагаю, что вам нужны оба, поскольку вам нужны базовые классы CSS mdc-tab-indicator. Кроме того, вы хотите использовать миксины для создания настраиваемого индикатора вкладки.

Итак, окончательный результат выглядит так:


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

.my-tab-indicator {
    @include tab-indicator.underline-color(orange);
};
person Konstantin Lyakh    schedule 22.01.2021
comment
Спасибо за ссылку на документацию, она помогла мне больше узнать о SASS. К сожалению, я все еще получаю то же сообщение об ошибке, используя это с пространством имен. - person AnKo; 25.01.2021
comment
@AnKo Я еще раз посмотрел на проблему и добавил в ответ дополнительные сведения. Обратите внимание, что я изменил имя класса и пространство имен. На всякий случай вот рабочий пример. Индикатор табуляции не отображается, но компилируется - codesandbox.io/s/tab-indicator-test-ntfo8?file=/src/app.scss - person Konstantin Lyakh; 25.01.2021