dumi2.x如何支持css Module?

在 dumi 2.x 中支持 CSS Modules 是比较直接的，因为 dumi 基于 Umi，而 Umi 自身就对 CSS Modules 提供了良好支持。以下是基本步骤和注意事项来在 dumi 项目中使用 CSS Modules：

1. 安装依赖：
   确保你的项目中已经安装了相应的加载器，如style-loader、css-loader以及可能的less-loader、sass-loader等，具体取决于你使用的 CSS 预处理器。这些通常是项目初始化时自动安装的，如果没有，可以通过 npm 或 yarn 安装。

2. 配置 CSS Modules：
   在 dumi 项目中，你通常不需要显式地在配置文件中开启 CSS Modules，因为 Umi 默认支持。你只需要在你的 CSS 文件名上加上.module前缀，然后在 JS/TS 文件中按模块方式导入即可。

   例如，如果你有一个 Button.css 文件想要作为 CSS Module 使用，你应该重命名为 Button.module.css，然后在 JS/TS 文件中这样导入：

   import React from 'react';
   import styles from './Button.module.css';
   
   const Button = () => (
     <button className={styles.button}>
       Click me
     </button>
   );
   
   export default Button;
   

3. 在 dumi 文档中使用 CSS Modules：
   如果你在 dumi 的文档页面（通常是 .md 或 .mdx 文件）中需要使用 CSS Modules，你可以通过在页面的 FrontMatter 中引入 CSS 文件，然后在文档中通过全局样式类名来应用样式。
   不过，直接在 Markdown 文件中使用 CSS Modules 可能不如在组件内部那样直接，你可能需要通过自定义组件或者 MDX 的方式来更好地集成 CSS Modules。

4. 配置优化：
   虽然默认情况下 Umi 和 dumi 应该能很好地处理 CSS Modules，但你可能需要根据项目需求调整配置，比如在 dumi.config.js 或 .umirc.ts 文件中调整 CSS 相关的加载器配置。
   例如，你可以控制是否启用 CSS Modules、设置输出路径或是添加自定义的 CSS 处理规则。

如果需要更详细的配置或特定需求的调整，查阅 dumi 和 Umi 的官方文档是最直接的途径，它们会提供最新的配置选项和最佳实践。