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 模块化。

Answer 2

该回答引用ChatGPT
在不使用eject的情况下，如果想在create-react-app项目中使用模块化的SCSS，可以采用如下步骤：
1、安装node-sass：在项目根目录中打开终端，输入命令：

npm install node-sass --save-dev

2、创建SCSS文件：在项目中创建一个目录来存放SCSS文件，例如：src/scss。

3、使用SCSS文件：在你需要使用的组件中，导入你的SCSS文件，并在组件的JS文件中添加一个import语句。

4、配置解析SCSS：在项目根目录中找到react-scripts目录，在其中找到config/webpack.config.js文件，添加以下代码来支持解析SCSS文件：

{
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ],
  }

5、模块化SCSS：使用命名空间，让同一个类名在不同的SCSS文件中有不同的作用域，例如：

.header {
  color: red;
}

在另一个SCSS文件中：

.header {
  font-size: 18px;
}

这样，你就可以在不使用eject的情况下，实现在create-react-app项目中的SCSS模块化。

Answer 3

如果你不想使用eject命令并且希望实现 scss 模块化，你可以使用以下步骤：

1.安装 node-sass 和 sass-loader：

npm install node-sass sass-loader --save-dev

2.在每个组件目录下创建 scss 文件，并在该文件中定义组件的样式。

3.在组件的文件中导入对应的 scss 文件：

import './YourComponent.scss';

4.在 webpack 配置中加入 sass-loader：

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

这样就可以在不使用eject的情况下实现 SCSS 模块化。

Answer 4

1. 在package.json中添加依赖：

"sass-loader": "^7.1.0",
"node-sass": "^4.11.0",

1. 在webpack.config.js中添加配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
};

1. 使用：

import React from 'react';
import styles from './App.scss';

const App = () => (
  <div className={styles.container}>
    <h1>Hello World!</h1>
  </div>
);

export default App;