reactjs - React 如何为特定组件生成单独的样式表？

Question

在这里，我想为 Landing 组件生成一个单独的样式表，并希望为其他组件。其他组件也会有 Hero 组件。谁能告诉我我该怎么做？这是不是一个好主意？。

标签： reactjswebpack

Answer 1

任何带有下划线的东西_name.scss，都会告诉你的 sass 编译器它是一个部分 scss 文件。简单地不要对单组件 scss 文件使用下划线，例如：Hero.scss. 然后在您的 中Hero.js，您可以像这样导入样式：

import './Hero.scss';

<div className="heroContainer">...</div>

或者，如果您的 webpack 已配置为允许导入 scss 模块，那么您可以这样做：

import { heroContainer } from './Hero.scss';

<div className={heroContainer}>...</div>

如果您想heroContainer与其他样式表共享 的样式，只需@extend在您的 scss 文件中使用 。

clientsContainer {
  @extend .heroContainer;
}

这种方法的缺点是您必须手动将任何部分（如_vars.scss、_mixins.scss...等）以及任何其他相关样式表导入到每个新Example.scss文件中。

理想情况下，如果您在一个大型团队中工作，最好个性化您的 scss 样式表，以便一切都是模块化的（组件及其样式可以传递给其他人，而不必为一个组件发送所有样式表）。