NextJS 和 Vercel：网站不呈现/使用 CSS 和 ReactJS

Posted 2023-03-07

【中文标题】NextJS 和 Vercel：网站不呈现/使用 CSS 和 ReactJS

【英文标题】：NextJS & Vercel: Website not rendering/using CSS & ReactJS

【发布时间】：2020-10-26 19:02:14

【问题描述】：

我们的企业目前正在探索 Vercel 以部署我们用 React 和 NextJS 编写的新着陆页。在本地（纱线开发）运行它们时，一切正常（css 导入和 React 挂钩）。在 Vercel 上部署时，CSS 和 React 都不起作用。

项目组织如下（概念上）：

./src/pages/_app.tsx：导入css（也使用tailwind）并将应用程序包装到IconContext.Provider（用于图标）

./src/pages/index.tsx：导出（默认）组件，它使用内部反应组件来渲染/钩子来处理逻辑

过去几个小时我们一直在调试这个问题，但仍然不知道错误在哪里（因为我们可以完美地在本地启动它们）。

您可以在这里查看网站：https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/

你能理解哪里出错了吗？谢谢

【问题讨论】：

你试过运行yarn build && yarn start - yarn dev 只是一个开发实例。 - 此外，vercel 仪表板显示什么？

【参考方案1】：

已解决并发现“错误”：我是个彻头彻尾的白痴，React 在现实中工作。我认为相反，因为缺少 css，这让一切变得一团糟。

我在 purgecss 中遇到的错误：清除 css 的规则不正确，并且在构建时它正在消除所有自定义 css。

感谢@Ramakay 的帮助。实际上，使用 yarn build && yarn start 使得在本地复制一切变得更简单（在 package.json 中没有注意到它们）。