为什么我的CSS被SCSS覆盖，而SCSS甚至没有包括在内

why my css is overriden by scss which is even not included(为什么我的CSS被SCSS覆盖，而SCSS甚至没有包括在内)

问题描述

我正在处理物化CSS并使用该库https://materializecss.com/

我编译了sass并将该css文件包含在我的html中，但当我尝试做一些自定义的css时，我发现了奇怪的事情。

当我检查元素时，我看到Chrome正在从我的html中仍未使用的.scss文件中获取css。

而我只包括两个css文件。

<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css"/>

推荐答案

您正在追逐幽灵。问题不是不是SCSS，而是评论中指出的CSS Specificity。忽略该规则来自.scss文件这一事实，并将重点放在css特性上。

为什么在检查器中看到.scss文件：
要包括的materialize.css文件包含一个对物化SCSS文件的引用(称为"源映射")(如果您查看Materialize.css文件，您将看到该文件底部列出了源映射引用)。由于该源映射，当您在浏览器的开发人员控制台中检查项时，它实际上会向您显示正在应用样式的SCSS行。这是一件好事，如果你自己在SCSS中开发，你会非常感激的。

真正的问题：
但问题是，materialize.css样式正在生效，而您的styles.css样式没有生效，因为CSS Specificity。

.side-nav .collapsible-body li a,
.side-nav .nav.fixed .collapsible-body li a {
    padding-left: 50px;
    font-weight: 400;
}