避免全局导入 SASS 文件 Reactjs

Question

在包含主页组件的文件 Home.tsx 中，我导入一个 SASS 文件，如下所示：

import styles from "../styles/Home.module.sass"

Home.module.sass

#container
    width: 100%
    height: 100vh
    display: block
    overflow: auto


#container > div
    width: 50%
    float: left
    height: 100%
    display: flex
    padding: 0 50px
    align-items: center
    box-sizing: border-box
    flex-direction: column
    justify-content: center

...

在 Home.tsx 中，我使用这样的 CSS 类：

   <span className={styles.title}>Welcome {user.name}</span>

我使用“modules”的原因是因为我不想全局导入我的SASS。

在 Panel.tsx 中，我导入其他 SASS 文件：

import "../styles/Panel.sass"
import "../styles/Popup.sass"

问题是，即使在 Panel.tsx 中，Home.module.sass 的 CSS 也会被导入，尽管我实际上并没有导入它。我猜 SASS 文件是全局导入的。我该如何避免这种情况？我尝试使用“模块”，但这显然不起作用。

我想我可以在 Home.module.sass 中像

.home-page

一样创建父级，并在 Home.tsx 中使用容器

<div className="home-page>

但这似乎不是最佳选择。

如何避免SASS文件被全局导入？

Answer 1

您能检查一下以下解决方案吗？希望它对你有用。

您已经编写了如下代码

#container > div
    width: 50%
    float: left
    height: 100%
....

这将应用

div

的所有直接子元素

#container

，而不是这个，您必须为该

div

元素提供一个特定的类来解决您的问题，例如。

#container > .child-element
    width: 50%
    float: left
    height: 100%
    display: flex
    ...

您必须分享更详细的代码或codesandbox链接以获得完美的解决方案。