在React项目中使用css modules

一、为什么使用css modules

局部性（Local Scoping）： 在使用CSS Modules时，每个CSS类名是动态生成的，它们只在对应的组件中有效，不会影响其他组件或全局样式表。这样，你可以在组件中使用相同的类名，而不需要担心命名冲突。

唯一性（Uniqueness） ：在编译过程中，CSS Modules会自动生成独一无二的类名，并将其映射到对应的组件。这样，可以确保每个组件的类名是唯一的，避免了全局命名冲突的问题。

自动类名映射（Automatic Class Name Mapping）： 使用CSS Modules后，你无需手动管理类名映射关系，它们会在编译时自动处理。你只需要在组件文件中使用导入的样式对象，并将对应的类名应用到组件的元素上。

代码可维护性（Code Maintainability）： CSS Modules提供了更好的代码隔离性，使得每个组件的样式独立维护和修改。通过将CSS文件与对应的组件文件放在一起，可以更轻松地追踪和修改组件的样式

二、如何使用css modules

1. 安装依赖

在React项目根目录下运行命令

npm install --save-dev css-loader style-loader

2. 配置Webpack

若你使用的是Create React App，Webpack的配置已经在底层处理过。否则，在Webpack配置文件（通常是webpack.config.js）中添加以下规则：

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[name]__[local]__[hash:base64:5]', // 修改CSS类名的生成格式
        },
      },
    },
    'postcss-loader', // 如果有其他的CSS预处理器，比如autoprefixer，可以在此添加
  ],
}

3. 创建css文件

在React项目的组件目录下，创建一个CSS文件。例如，创建一个名为styles.module.css的文件
== 注意：Create React App创建的react项目中，默认是开启 CSS Module 的。但是对于样式文件的命名有一个约束，需要以.module.less/css/sass结尾==

• 在React项目中，通常建议将组件的相关文件（包括CSS文件）放置在与组件对应的文件夹中，可以是在src目录下或者是在组件所在目录下的子文件夹中。

• 一种常见的组织方式是在src目录下创建一个名为components的文件夹，然后在其中放置各个组件的文件夹。每个组件文件夹中包含组件的代码文件以及相关的CSS文件。

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.js
│   │   ├── styles.css       <- 在React项目的组件目录下创建的CSS文件
│   │   └── ...
│   ├── AnotherComponent/
│   │   ├── AnotherComponent.js
│   │   ├── styles.css
│   │   └── ...
│   └── ...
├── App.js
├── index.js
└── ...

4. 使用css modules

在CSS文件中，可以定义样式并使用独特的类名。这些类名将在编译时生成，并自动与React组件关联

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.title {
  font-size: 24px;
  color: blue;
}

/* 可以通过以下方式定义全局样式 */
:global {
  .global-style {
    color: red;
  }
}

5. 在React组件中使用CSS Modules

在React组件中引入CSS模块，并将其应用到相应的元素.

import React from 'react';
import styles from './styles.css'; // 导入CSS模块样式

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
      <p className={styles['global-style']}>This is a global style.</p>
    </div>
  );
}

export default MyComponent;