postcss-modules配置

PostCSS-Modules 是一个 PostCSS 插件，它可以将 CSS 模块化，防止类名冲突和样式污染。

下面是一个常见的 PostCSS-Modules 的配置：

const postcssModules = require('postcss-modules');

module.exports = {
  plugins: [
    postcssModules({
      // 生成的类名格式
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      // 生成的 JSON 文件路径
      getJSON: (cssFileName, json, outputFileName) => {
        const jsonFileName = `${outputFileName}.json`;
        fs.writeFileSync(jsonFileName, JSON.stringify(json));
      },
    }),
  ],
};

这里主要用到了 `generateScopedName` 和 `getJSON` 两个选项。

`generateScopedName` 选项用来指定生成的类名格式，其中 `[name]` 表示文件名，`[local]` 表示类名，`[hash:base64:5]` 表示使用 5 位的 hash 值作为区分。

`getJSON` 选项用来指定生成的 JSON 文件路径，其中 `cssFileName` 表示当前 CSS 文件路径，`json` 表示生成的 CSS 类名与新类名的映射关系，`outputFileName` 表示生成的 CSS 文件路径。在这里，我们将生成的映射关系写入与 CSS 文件同名的 JSON 文件中。

当你使用 PostCSS-Modules 编译 CSS 文件时，会生成一个对应的 JSON 文件，里面存储了 CSS 类名与新类名的映射关系。在 JavaScript 文件中，可以通过 `import` 引入这个 JSON 文件，并使用其中的类名。例如：

import styles from './styles.css.json';

const className = styles.myClass; // 使用新类名

这样，即使多个 CSS 文件中定义了同名的类，在编译后也可以保证它们的类名不会冲突。