Question

我正在用React.js做项目，我的反应代码login.scss，dashboard.css中有三个scss文件，还有一个名为index.scss的主要scss文件。

我在index.scss文件中有一种通用样式，并且我在index.scss中都导入了这两个scss文件。但是我的样式在页面中很重要，因此我的设计无法正常进行。我该如何克服这个问题？

Answer 1

我假设index.scss是您的默认样式，而dashboard.scss和login.scss是您更具体的样式表。因此，给定index.scss与其他任何一个工作表之间的冲突，您希望给特定的样式表优先。在这种情况下，您需要@import index.scss到其他工作表。

CSS会自上而下读取，因此位于底部的工作表（即，导入的工作表）将优先于其他工作表。如果dashboard.scss包含@import，则在index.scss和dashboard.scss中具有相同属性的所有类，标签等都将从dashboard.scss中分配该属性。

例如：

index.scss

.some-class {
   color: red
}

dashboard.scss

@import index.scss
.some-class {
   color: blue;
}

在这种情况下，具有.some-class的元素将具有蓝色字体。

或者，您可以在HTML页面中的<link>标签中包含每个工作表，并且将index.scss放在顶部，因为HTML中使用了相同的自顶向下的CSS读取。

如果index.scss中有您不希望覆盖的内容，则可以将!important应用于该规则。但是，应尽可能避免这种情况，理想情况下，您只会在dashboard.scss中编写您不希望被index.scss覆盖的内容。