我正在尝试使用Material Components中的这个标签栏：https://material.io/develop/web/components/tabs/tab-bar/
我在执行安装步骤时遇到问题。这是我到目前为止：
tab.html：
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
<span class="mdc-tab__text-label">Favorites2</span>
<span class="mdc-tab__text-label">Favorites3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>tab.css：
<style lang="scss">
@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab/mdc-tab";
body{
background-color: blue;
}
#app
{
main
{
margin-top:65px;
}
div.mdc-layout-app--main-container{ display: block !important;}
div.mdc-layout-app
{
max-width: 1000px;
background-color: white !important;
margin: 0 auto;
}
header.mdc-top-app-bar
{
max-width: 1000px;
}
}
</style>import {MDCTabBar} from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));我希望它看起来像演示，但现在它看起来像完全不同的东西。我想知道是否有人可以为我更多地打破这些步骤，因为我非常困惑。谢谢。所有帮助表示赞赏。
这就是它的样子：enter image description here
我希望它看起来像这样：enter image description here
您是否尝试在浏览器中运行SCSS？如果是这样，这就是问题所在。代码的“CSS”部分实际上是SCSS，这是一种嵌套语法，需要将其编译为常规CSS，以便浏览器能够读取它。例如：
SCSS（浏览器无法读取）
#app {
main {
margin-top: 65px;
}
}
CSS（工作正常）
#app main {
margin-top: 65px;
}
材料应该为您提供纯CSS版本，否则您将需要使用编译器。
在Simran上添加他的答案：
我在你的HTML中看不到<script src="app.js"></script>。
您需要使用babel编译下面的代码，并在HTML中包含输出文件。
import {MDCTabBar} from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
如果不清楚你怎么做这个重新阅读Getting started
第3步：使用ES2015的Webpack是关于使用Babel编译JavaScript