为什么我的全局样式模块被多次导入？答案

【问题标题】：Why are my global style modules being imported multiple times?为什么我的全局样式模块被多次导入？
【发布时间】：2021-07-07 22:00:19
【问题描述】：

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

您可以看到我的全局样式出现并被多次覆盖。

这是一个 Gatsby 应用，所以我使用 sass-loader 和默认的 dart-sass。

这是我如何配置我的gatsby-config.js 文件以允许我根据此 stackoverflow 帖子使用这些全局样式：https://stackoverflow.com/a/65904094/12119984

module.exports = {
  plugins: [
     ...
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        additionalData: `@use 'main' as *;`,
        //allow mixins, variables etc to be accessible globally
        sassOptions: {
          includePaths: [`${__dirname}/src/styles/sass`],
          // data: `@import "main.scss";`,
        },
      },
    }...

我使用@forward 和@extend 来让它在我的module.scss 文件中运行。我的文件夹结构如下所示：

我的全局样式在base.scss 中，我使用@forward 将它们导入main.scss：

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

例如，这是我的 index.module.scss 文件，然后我在其中使用这些全局样式：

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

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

【问题讨论】：

标签： css sass gatsby sass-loader

【解决方案1】：

@forward 规则，根据docs：

@forward 规则加载一个 Sass 样式表并制作它的 mixins，加载样式表时可用的函数和变量 @use 规则。它使组织 Sass 库成为可能许多文件，同时允许其用户加载单个入口点文件。

所以基本上，每次您在某个组件中请求 CSS 模块时，都会导入所有嵌套扩展（@extend 和 @use）。此外，由于 React 的组件扩展，您还可以在导入嵌套组件时嵌套样式（Layout 中的Button，index.js 中的Layout 等）

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

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

【讨论】：