antd 的 Typography 组件的样式导入有问题

[pymilk]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• 已阅读 文档.

• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)

• 已在 Issues 中搜索了相关的关键词

• 不是 ant design vue 组件库的 Bug

描述 Bug

请清晰地描述此 Bug 的具体表现。

views 中新增一个页面，使用 ant design vue 组件库中的 Typography 组件，yarn dev 开发时能够正常加载显示，但是 yarn preview 预览时提示报错，关键的错误信息如下：

[vite]: Rollup failed to resolve import ".../f/node_modules/ant-design-vue/es/typography-paragraph/style/index" from "src/views/sys/about/index.vue".
This is most likely unintended because it can break your application at runtime.

意思就是找不到 Typography 组件的样式。

复现 Bug

请描述在演示页面中复现 Bug 的详细步骤，以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及，请务必提供关键代码

1. 为了能够快速复现，修改原项目中的 About 页面即可，该文件路径为：src/views/sys/about/index.vue，页面内容修改如下：

<template>
  <div>
    <Typography>
      <TypographyTitle>测试排版</TypographyTitle>
      <TypographyParagraph>
        1.  中文文档地址为 vben-admin-doc，采用 Vitepress 开发。如发现文档有误，欢迎提 pr 帮助我们改进。 <br />
        2. 英文文档暂时没有时间来写，欢迎有时间的同学来帮忙写英文文档。 <br />
        3. 感谢作者开源！！！
      </TypographyParagraph>
    </Typography>
  </div>
</template>

<script language="ts" setup>
  import { Typography, TypographyParagraph, TypographyTitle } from 'ant-design-vue';
</script>

2. 使用 yarn dev 开发观看页面正常，使用 yarn preview 打包预览就会报错。

傻瓜式解决 Bug

报错信息说就是找不到 Typography 组件的样式，于是我阅读了一下 ant design vue 关于该组件的代码，发现 TypographyTitle、TypographyParagraph、TypographyText 等等以 Typography 开头的组件其实均在共用一个 typography 样式文件，因此修改导入部分的代码，让它能够正确导入改组件的样式即可。

由于我不懂前端，就采用以下方式比较傻瓜式的针对性方案，临时解决了以上 bug，但是不具备通用性，因为不确定是否也有同样的组件出现类似情况。需要作者进行优化处理。

傻瓜式解决办法：
修改 build/vite/plugin/styleImport.ts 文件中导入组件样式的代码如下，大概从第 16 行开始：

export function configStyleImportPlugin(isBuild: boolean) {
  if (!isBuild) {
    return [];
  }
  const styleImportPlugin = styleImport({
    libs: [
      {
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
+          // 处理 typography 组件
+          let new_name = name;
+          const name_list = name.split('-');
+          if (name_list[0] === 'typography') {
+            new_name = name_list[0];
+          }
+          return `ant-design-vue/es/${new_name}/style/index`;
        },
      },
    ],
  });
  return styleImportPlugin;
}

系统信息

• 操作系统: Mac 11.5.2
• Node 版本: 14.17.1
• 包管理器 (npm/yarn/pnpm) 及其版本: 1.22.11
• vben admin 版本：2.7.1
• ant design vue 版本：2.2.6
• vute 版本：2.5.0

作者辛苦了，开源不易，加油！！！