如何将 sass 文件导入 React 中的单个组件答案

【问题标题】：How to Import sass file to single components in React如何将 sass 文件导入 React 中的单个组件
【发布时间】：2019-10-15 17:56:13
【问题描述】：

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

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

【问题讨论】：

你是怎么导入的？
import "./dashboardStyle.scss";
你是如何在 home 组件中导入你的 sass 文件的？
@CecilJohnTantay 我创建了小提琴，请看一下（代码）
jsfiddle.net/chtkus42/1

标签： javascript reactjs ecmascript-6 saas

【解决方案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文件了。如果需要更多解释，请告诉我。

【讨论】：

如何从 Sass 文件中导入所有类？
你可以这样做 import {class1, class2, class3} from "./Home.module.scss";
或者你可以使用解构。
如果我的文件中有千个班级，那么我会这样做吗？
从“./Home.module.scss”导入样式；然后像这样使用。按钮

【解决方案2】：

我假设你通过安装node-sass 安装了 sass。

你需要做的就是将它们导入到一个需要sass的组件中，在js文件的顶部。

import './dashboard.scss'

【讨论】：