从父样式补充子样式（SCSS + CSS-Modules）答案

【问题标题】：Complement child styles from parent ones (SCSS + CSS-Modules)从父样式补充子样式（SCSS + CSS-Modules）
【发布时间】：2021-01-06 08:49:35
【问题描述】：

我有以下文件和 React 结构：

1. header.scss

.header { ...header styles }

2。 home.scss

@use './header.scss'

.home {
  
   .header {
     background-color: red;
   }
    
}

3. component.js(React)

  import homeStyles from "./home.scss";
  import headerStyles from "./header.scss" 

...
  <div className={homeStyles.home}>
     <div className={headerStyles.header}>...</div>
  </div>
...

所以，如您所见，我使用 React 和 css-modules。目标是从home.scss 中的home.scss 样式补充.header 类。目前，我无法使此代码正常工作（未应用背景颜色设置）。有没有办法达到这个效果？

【问题讨论】：

为什么不为./home.scss 的导入添加2 个变量并为标题使用一个？如果原来的家庭导入有效，我看不出有理由导入它。
@ZombieChowder，我希望标题是独立的。它只包含标题所需的样式，但home.css 知道如何定位和调整里面的东西。

标签： css reactjs sass react-css-modules

【解决方案1】：

建议将header.scss文件导入home.scss
@import "./header.scss"; 然后只将 1 个 scss 文件导入到 javascript 文件中。

如果您使用的是编译器：要确保两个文件都没有被编译，请在文件名 _header.scss 之前添加 char _

【讨论】：

它将您的整个样式导入到一个 scss 文件中，该文件将在 Javascript 代码中使用。但是，如果 home.scss 文件中还有其他内容，则应在末尾添加 @import 标头。
请记住，您必须为 Sass 使用编译器。要么是 webpack，要么是 gulp。其中有很多。浏览器看不懂scss的代码。它只懂 css。