javascript - 如何将 sass 文件导入 React 中的单个组件

Question

我认为问这个问题可能很愚蠢，但相信我，我遇到了麻烦和沮丧。其实我有两个组件一个是Home第二个是Dashboard .我为个人组件创建了两个 sass 文件，意味着一个用于 home第二个是 dashboard .对于 Home，它工作正常，但是当我将 sass 文件包含到 dashbaord 组件中时，它会中断 home page组件样式。如何解决这个问题。我想单独实现，应该是独立的。

我也使用了 react-router 所以请帮助我实现我的目标

Answer 1

您可以使用 Sass css 模块实现独立的 sass 文件来响应组件。

您必须创建两个 sass 文件 Home.module.scss 和 Dashboard.module.scss

.btn {
  color:red;
}

你可以像这样导入。

import {btn} from "./Home.module.scss";
import {btn} from "./Dashboard.module.scss";

其中 btn 是 sass 文件中的类名。

然后你可以像这样在组件中使用该类。

<a className={btn}> Button </a>

这样你就可以独立使用 sass 文件了。
让我知道是否需要更多解释。