在React项目中使用css modules

在React项目中使用CSS Modules，你需要做以下几步：

1. 安装css-loader和style-loader，通常会安装react-app-rewired来重写Create React App的配置（如果你还没有ejected）：

npm install --save-dev css-loader style-loader react-app-rewired

2. 在项目根目录下创建一个config-overrides.js文件来重写webpack配置：

const { override, addCSSModuleSupport } = require('react-app-rewired');
 
module.exports = override(
  addCSSModuleSupport({
    fileTypes: {
      '.scss': {
        syntax: 'postcss-scss',
        plugins: ['postcss-modules-values']
      }
    }
  })
);

3. 在你的React组件中引入CSS模块：

import React from 'react';
import styles from './App.module.scss'; // 注意这里的文件扩展名是.scss
 
const App = () => {
  return <div className={styles.app}>Hello, CSS Modules!</div>;
};
 
export default App;

4. 使用CSS Modules特有的类名引用：

/* App.module.scss */
.app {
  color: blue;
}

确保你的.scss文件名为*.module.scss，这样webpack会自动为其启用CSS Modules支持。在你的React组件中，通过styles对象访问CSS模块中定义的类名，这些类名会被自动转换为唯一的标识符，从而避免了全局样式冲突的问题。