Javascript 使用Material Design中的选项卡栏html/css/js

我正在尝试使用从材质组件获取此选项卡栏：

我在执行安装步骤时遇到问题。这就是我到目前为止所做的：

tab.html：

最喜欢的
最爱
偏爱2
偏爱3

是否尝试在浏览器中运行SCS？如果是这样，这就是问题所在。代码的“CSS”部分实际上是SCSS，这是一种嵌套语法，需要编译为常规CSS，以便浏览器能够读取它。例如：

SCSS（浏览器无法读取）

CSS（工作正常）

---

材料应为您提供简单的CSS版本，否则您将需要使用编译器。

要添加Simran的答案：

我在你的HTML中没有看到

您需要使用babel编译下面的代码，并在HTML中包含输出文件

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

---

如果不清楚您是如何做到这一点，请重新阅读

---

步骤3:Webpack with ES2015是关于使用Babel编译JavaScript的

谢谢，但这仍然不能解决问题。看起来还是一样。在我的编辑中，我发布了我希望它看起来像什么以及它当前看起来像什么

选项卡。css

仍在尝试使用嵌套的SCSS语法

#app main { 
  margin-top: 65px; 
}

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));