为什么mdc-top-app-bar没有显示正确的MDC。

Question

你能告诉我我哪里错了吗。我想使用mdc-顶部-应用程序栏，但它不起作用。

我的模块结构：.html，.scss，.ts，.spec

header.component.html

<header class=" mdc-top-app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon--unbounded">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span> </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
      <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Download">file_download</button>
      <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Print this page">print</button>
      <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Bookmark this page">bookmark</button>
    </section>
  </div>
</header>

这是我的.ts文件

import { Component, OnInit } from '@angular/core';
import {MDCTopAppBar} from '@material/top-app-bar';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    const topAppBarElement = document.querySelector('.mdc-top-app-bar');
    const topAppBar = new MDCTopAppBar(topAppBarElement);
  }
}

这就是我的代码的样子;)

​

​

我在.scss文件中使用这个

@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/icon-button/mdc-icon-button";

但我错了

ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
23 │ @use "@material/elevation/mixins" as elevation-mixins;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@material\top-app-bar\mdc-top-app-bar.scss 23:1  @use
  C:\Users\\CarApp\car-shareing-app\src\app\modules\home\components\car-dictionary\car-dictionary-list\car-dictionary-list.component.scss 1:1                                                     root stylesheet

Answer 1

好的。我找到了解决方案，mdc-top-app-bar出现了问题，google没有修复:( 要导入的文件未找到或无法读取，我将选择另一个导航工具。)