不容忽视的dumi踩坑指南！踩过的坑都能在这里找到

2024-02-19 04:46:02

前言

Dumi 是一款非常好用的文档站点构建工具，但是我们在使用 Dumi 的过程中也会遇到一些问题。为了帮助大家避免这些问题，我把我在开发过程中踩过的一些坑列举了出来，希望能够帮助到大家。

踩过的坑

坑1：无法将 Markdown 转换为 HTML

当我刚开始使用 Dumi 的时候，我遇到了一个问题，那就是无法将 Markdown 转换为 HTML。我尝试了很多方法，但是都没有成功。最后，我发现原来是我没有安装 markdown-loader。安装了 markdown-loader 之后，问题就解决了。

坑2：无法将代码块中的代码高亮

在 Dumi 中，如果想将代码块中的代码高亮，需要安装 prismjs 和 prismjs-themes 这两个包。然后，在 package.json 文件中添加如下配置：

{
  "scripts": {
    "build": "dumi build"
  },
  "devDependencies": {
    "dumi": "^1.3.1",
    "markdown-loader": "^4.1.0",
    "prismjs": "^1.28.0",
    "prismjs-themes": "^1.28.0"
  }
}

配置完成后，就可以将代码块中的代码高亮了。

坑3：无法在 Dumi 中使用 SVG

Dumi 中默认是不支持使用 SVG 的。如果想在 Dumi 中使用 SVG，需要安装 svg-sprite-loader 这个包。然后，在 package.json 文件中添加如下配置：

{
  "scripts": {
    "build": "dumi build"
  },
  "devDependencies": {
    "dumi": "^1.3.1",
    "markdown-loader": "^4.1.0",
    "prismjs": "^1.28.0",
    "prismjs-themes": "^1.28.0",
    "svg-sprite-loader": "^4.2.4"
  }
}

配置完成后，就可以在 Dumi 中使用 SVG 了。

坑4：无法在 Dumi 中使用 CSS Modules

Dumi 中默认是不支持使用 CSS Modules 的。如果想在 Dumi 中使用 CSS Modules，需要安装 css-modules-typescript-loader 这个包。然后，在 package.json 文件中添加如下配置：

{
  "scripts": {
    "build": "dumi build"
  },
  "devDependencies": {
    "dumi": "^1.3.1",
    "markdown-loader": "^4.1.0",
    "prismjs": "^1.28.0",
    "prismjs-themes": "^1.28.0",
    "svg-sprite-loader": "^4.2.4",
    "css-modules-typescript-loader": "^1.5.0"
  }
}

配置完成后，就可以在 Dumi 中使用 CSS Modules 了。

坑5：无法在 Dumi 中使用 less

Dumi 中默认是不支持使用 less 的。如果想在 Dumi 中使用 less，需要安装 less-loader 和 postcss-loader 这两个包。然后，在 package.json 文件中添加如下配置：

{
  "scripts": {
    "build": "dumi build"
  },
  "devDependencies": {
    "dumi": "^1.3.1",
    "markdown-loader": "^4.1.0",
    "prismjs": "^1.28.0",
    "prismjs-themes": "^1.28.0",
    "svg-sprite-loader": "^4.2.4",
    "css-modules-typescript-loader": "^1.5.0",
    "less-loader": "^5.0.0",
    "postcss-loader": "^3.0.0"
  }
}