dumi2.x如何支持css Module?

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

安装依赖：
确保你的项目中已经安装了相应的加载器，如style-loader、css-loader以及可能的less-loader、sass-loader等，具体取决于你使用的 CSS 预处理器。这些通常是项目初始化时自动安装的，如果没有，可以通过 npm 或 yarn 安装。
配置 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;
```
在 dumi 文档中使用 CSS Modules：
如果你在 dumi 的文档页面（通常是 .md 或 .mdx 文件）中需要使用 CSS Modules，你可以通过在页面的 FrontMatter 中引入 CSS 文件，然后在文档中通过全局样式类名来应用样式。
不过，直接在 Markdown 文件中使用 CSS Modules 可能不如在组件内部那样直接，你可能需要通过自定义组件或者 MDX 的方式来更好地集成 CSS Modules。
配置优化：
虽然默认情况下 Umi 和 dumi 应该能很好地处理 CSS Modules，但你可能需要根据项目需求调整配置，比如在 dumi.config.js 或 .umirc.ts 文件中调整 CSS 相关的加载器配置。
例如，你可以控制是否启用 CSS Modules、设置输出路径或是添加自定义的 CSS 处理规则。

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

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18217951.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！