react中使用modules.css

在 React 中使用 CSS Modules 可以帮助你更好地管理组件的样式。下面是一些基本步骤：

1. 在 React 项目中安装 css-loader 和 style-loader：

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

2. 在 webpack 配置文件中添加以下规则：

   {
     test: /\.css$/,
     use: [
       'style-loader',
       {
         loader: 'css-loader',
         options: {
           modules: true
         }
       }
     ]
   }

这样，当你在组件中引入 CSS 文件时，它将自动使用 CSS Modules。

3. 在组件中使用样式：

   import React from 'react';
   import styles from './MyComponent.module.css';

   function MyComponent() {
     return (
       <div className={styles.container}>
         <h1 className={styles.title}>Hello World</h1>
       </div>
     );
   }

   export default MyComponent;

注意，我们使用 `import styles from './MyComponent.module.css'` 来引入 CSS 模块，并且使用 `styles.container` 和 `styles.title` 来应用样式。

这样，你就可以使用 CSS Modules 来管理你的组件样式了。