Question

我有以下文件和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模块。目标是从.header的{{1}}样式中补充home.scss类。目前，我无法使用此代码（未应用背景色设置）。有什么办法可以达到这个结果？

Answer 1

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

如果您使用的是编译器：为确保两个文件均未编译，请在文件名_之前添加char _header.scss

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

1 个答案: