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

问题描述

我试图在我的 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，我将它们导入main.scssusing @forward：

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

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

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

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

标签： csssassgatsbysass-loader

根据文档@forward，规则：

该@forward规则加载一个 Sass 样式表，并在您的样式表与该规则一起加载时使其混合、函数和变量可用@use。它使跨多个文件组织 Sass 库成为可能，同时允许其用户加载单个入口点文件。

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

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

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

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

问题描述

解决方案

推荐阅读