Taro踩坑｜UI库组件样式丢失｜[taro] 找不到页面 pages/index/index 依赖的自定义组件

问题描述

在使用 Taro CLI 初始化项目之后，想要引入 UI 库进行开发。尝试在 index 页面中引入 UI 库的组件（Taroify 和 TaroUI），都在编译阶段出现了以下报错：

[taro] 找不到页面 pages/index/index 依赖的自定义组件

具体的表现是组件样式无法正常显示，但是组件中的字符串能够正常显示。

解决方法

如果你也遇到这个问题，并且在使用 CLI 工具初始化项目时，编译工具选择了 Vite；那么恭喜你，你找到了解决方法！

只需把编译工具改成 Webpack5，一切问题都迎刃而解。

为什么遇到这个问题

本人之前做 Web 和 RN 较多，想要尝试一下小程序开发。因为技术栈是 React，所以自然选择了适配 React 的 Taro 框架。

由于这是我第一次接触小程序开发，没有相关工程经验。在使用 Taro CLI 进行项目初始化的时候，看到编译工具有两个选项，分别是 Webpack5 和 Vite。H5开发的经验告诉我，Vite 编译会更快，因此我就选了 Vite 这个选项。

使用 Vite 的 Taro 项目中，引入 Taro 的原生组件没问题，但是每次一引入第三方 UI 库，就开始出现报错。问了 AI 说可能是样式问题，但是单独引入 .css/.scss 文件也解决不了问题。

问题定位

最后已经想要放弃了，心想着大不了就用 Uniapp 吧。然后就看到了这篇博客：

Taro跨端开发探索2——集成taro-ui

反正作者也是踩了 Taro 的坑，看到 ta 写的引用组件样式方法之后，我尝试了一下，然后发现自己的项目报错，说是 Vite 不支持 ~ 前缀。

然后我才恍然大悟，原来是编译工具的问题！于是马上用 Webpack5 重建了一个项目，泪目，组件终于能正常显示了～

总结

对于小程序开发的新手而言，开始是成功的一半；像这种组件库样式引入失败，而又无从寻找解决方案的问题，确实很容易劝退，令人沮丧。

希望这篇博客能够对读者有帮助，让你的项目正常运行起来！