Css 为什么要多次导入我的全局样式模块？

我曾尝试在我的Gatsby应用程序中设置一些全局SCS，但这样做之后，我在开发工具中看到了一些奇怪的行为：

您可以看到“我的全局样式”正在显示并被多次覆盖

这是一个盖茨比应用程序，所以我使用的是

sass加载程序

和默认的

dart-sass

下面是我如何配置我的

gatsby config.js

文件，以允许我基于本文使用这些全局样式：

我使用

@forward

和

@extend

在module.scss文件中实现所有功能。我的文件夹结构如下所示：

我的全局样式位于

base.scss

中，我使用

@forward

将它们导入

main.scss

：

@forward "base";
@forward "layout";
@forward "components";

作为一个exmaple，这里是我的

index.module.scss

文件，我在其中使用了以下全局样式：

.sectionHome {
 ...
  h1 {
    background-color: $color-secondary;
    @extend .uMarginBottomLarge;
    @extend .headingPrimary;
  }
}

---

对我来说，使用一些全局样式似乎是一种合理的方法，但要将它们扩展到本地sccs模块类中，那么有人能解释一下为什么要多次应用这些全局样式吗

---

@forward

规则加载Sass样式表并进行混合， 加载样式表时可用的函数和变量

@使用

规则。它使跨多个应用程序组织Sass库成为可能 许多文件，同时允许其用户加载单个入口点 文件

因此，基本上，每次在某个组件中请求CSS模块时，都会导入所有嵌套的扩展（

@extend

和

@use

）。此外，由于React的组件扩展，您还可以在导入嵌套组件时嵌套样式（

布局中的
按钮
，
布局中的
索引.js
，等等）

CSS中的全局样式的应用方式与CSS“标准”文件完全相同，正如您在扩展其文档中看到的，您需要在您的
gatsby browser.js
中添加以下内容：

import "./src/styles/sass/main.scss"

import "./src/styles/sass/main.scss"