时间戳

首页 > 解决方案 > 如何将 sass 文件导入 React 中的单个组件

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

问题描述

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

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

标签： javascriptreactjsecmascript-6saas

解决方案

您可以使用 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 文件了。让我知道是否需要更多解释。

推荐阅读