babel-plugin-react-css-modules配置

babel-plugin-react-css-modules 是一个 Babel 插件，用于在 React 项目中支持 CSS 模块化。

安装：

npm install babel-plugin-react-css-modules --save-dev

配置：

在 .babelrc 文件中添加插件配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".less": {
          "syntax": "postcss-less"
        }
      }
    }]
  ]
}

其中 `generateScopedName` 是用于生成 CSS 类名的规则，可以根据项目需要自定义。`filetypes` 是指定支持的 CSS 文件类型，可以根据需要添加或修改。

使用：

在 React 组件中引入 CSS 文件，并使用 `composes` 关键字来引用 CSS 类名：

import styles from './styles.less';

const MyComponent = () => (
  <div className={styles.container}>
    <p className={styles.title}>Hello World</p>
  </div>
);

export default MyComponent;

这样，`container` 和 `title` 类名就会被自动处理为唯一的、不重复的类名，从而支持 CSS 模块化。