时间戳

首页 > 解决方案 > 如何在没有 SCSS 文件的情况下使用 SCSS 设置 div 样式对 React 组件不重要

reactjs - 如何在没有 SCSS 文件的情况下使用 SCSS 设置 div 样式对 React 组件不重要

问题描述

所以我对使用 SCSS 很陌生，我有一个我必须处理的客户端项目（Gatsby JS），它使用它。

我注意到页脚如下

.main-footer {
  background-color: yellow;
  }

和组件

<section className="main-footer">
    <h6 >Erreichbarkeit</h6>
</section>

上面的代码使部分背景为黄色。我的问题是我不明白组件如何从 SCSS 文件接收 CSS，因为组件没有导入 SCSS 文件

任何人都可以帮我解决这个问题吗？

标签： reactjssass

解决方案

css 文件和 scss 文件都是全局的。如果产品中的任何东西导入 cass/scss 文件，结果是导入的样式将应用于所有内容。

是否有另一个文件正在导入有问题的 scss 文件？

有几种方法可以解决此问题，其中两种是

1.使用 https://www.toptal.com/css/introduction-to-bem-methodology来命名你的课程

  1. 查看 css 模块https://github.com/css-modules/css-modules。在幕后，css 模块向所有类名添加了一个字符串，这使得样式适用于每个文件

推荐阅读