为什么要引入其他样式文件？

Question

我正在对一个只引用了一个样式表的小Html文件进行故障排除。这是https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css。

Chrome开发者工具Network标签显示这是唯一下载的css文件。

但是，在Chrome Developer Tools中检查元素时，boostrap.min.css中没有样式。相反，存在对_navbar.scss等文件中的样式的引用。它们会显示行号，如果我点击此类链接，则会在Sources标签中显示https://maxcdn.bootstrapcdn.com/bootstrap/_navbar.scss。

我现在很困惑。这个_navbar.scss文件如何参与？为什么在bootstrap.min.css中找不到样式？

这是检查元素时的样子：

我是否错误地使用了Chrome开发者工具？

Answer 1

您会看到收集的源代码bootstrap.min.css。 bootstrap 4源文件是用sass编写的，如下所示：

这要归功于打开开发人员工具时下载并附加到浏览器的源地图。在此之前，浏览器不知道sourceMap。不要担心一切都会按预期运作。