react项目如何在不使用eject的情况下，达到scss模块化

Question

react项目如何在不使用eject的情况下，达到scss模块化
react项目是通过create-react-app创建
scss模块化的意思是在多个scss文件中有相同的类名,样式不会污染
不用最外层嵌套唯一类名的这个方法

Answer 1

在使用 create-react-app 创建的 React 项目中，您可以通过使用 CSS 模块实现 SCSS 模块化，而无需使用 eject。
CSS 模块允许你以模块化的方式编写 CSS，这样不同文件中的类名就不会相互冲突。 以下是如何在 React 项目中使用 CSS 模块的示例：
1、在 React 项目中创建一个 .scss 文件：例如，我们将其命名为 style.module.scss。
2、在 .scss 文件中写入您的样式：例如：

.header {
  background-color: blue;
  padding: 20px;
}

3、在你的 React 组件中导入 .scss 文件：例如，在你的 header.js 组件中：

import React from 'react';
import styles from './style.module.scss';

const Header = () => (
  <header className={styles.header}>
    <h1>Hello World!</h1>
  </header>
);

export default Header;

4、在 React 组件中应用样式：className 属性用于应用 .scss 文件中的样式。
请注意，.module.scss 扩展名很重要，因为它告诉 create-react-app 将文件视为 CSS 模块。 当你在 React 组件中导入 .scss 文件时，它会被转换成一个唯一的类名，从而防止类名冲突。

这是一个简单的示例，但您可以根据需要创建任意数量的 .scss 文件，每个文件都有自己的一组唯一的类名，从而使您可以在 React 项目中实现 SCSS 模块化。