Не могли бы вы сказать мне, где я допустил ошибку. Я хотел бы использовать md c -top-app-bar , но это не работает.
Моя структура модуля:. html, .s css, .ts, .spe c
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);
}
}
и вот так выглядит мой код;)
Я использую это в .s css файл
@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