production 环境中动态创建的 antd.min.xxx.css file 返回 404

[leotaozeng]

[leotaozeng]

请问有好的解决方案吗? @kiner-tang

[kiner-tang]

可以提供一下详细的操作步骤吗？

[leotaozeng]

1. git clone https://github.com/ant-design/create-next-app-antd.git
2. git checkout generate-css-on-demand
3. yarn install && yarn build
4. yarn start
5. open the browser: http://localhost:3000/detail

到这里一切都是正常的

然后切换到 http://localhost:3000
可以看到编辑器里 antd-output 的目录下新增了一个 CSS 文件，浏览器返回 404

@kiner-tang

如果能够提供解决方案，实在是万分感谢🙏

[kiner-tang]

这边看无论是首页还是详情页，获取样式都是正常的呀

[leotaozeng]

这边看无论是首页还是详情页，获取样式都是正常的呀

请不要直接打开 http://localhost:3000/
需要先打开 http://localhost:3000/detail 然后切换回 http://localhost:3000/

[leotaozeng]

因为我的一个项目用了 generate css on demand 也出现了这个问题.....

[kiner-tang]

因为我的一个项目用了 generate css on demand 也出现了这个问题.....

你这个看起来可能是没有写入权限或文件被其他进程占用了，没办法写入。试一下删除 _next 目录，在运行看看

[leotaozeng]

Screen.Recording.2023-06-16.at.10.32.53.mov

[leotaozeng]

https://create-next-app-antd-jqzcetzc7-zeng95.vercel.app/

直接 deploy 到 vercel 也出现错误。
detail 页面打开正常，因为 antd.min.xxx.css 文件是提前 buildtime 被注入进去的。
index 页面打开错误，因为 antd.min.xxx.css 文件是 runtime 被创建并注入的。

@kiner-tang

万分感谢🙏

[kiner-tang]

晚上看看哈，最近公司任务有些重

[kiner-tang]

看了一下，使用 SSG 的方式是没有问题的，但使用 SSR 确实有问题，动态生成的样式文件没有被加入到静态文件服务当中，导致无法被访问到。如果着急，可以先试用 SSG 方式，我看看这个怎么搞比较好

[kiner-tang]

@Zeng95 你可以尝试一下这个方法看看能否解决你的问题。不过这个方案目前只是个人想法，还需要等周一跟其他维护者讨论一下可行性和细节。但我本地尝试是可以解决问题的。#12

[dnbastos]

@kiner-tang Any update about this issue?

With the Next.js 14 update, this problem also occurs with SSG.

[dnbastos]

I fixed my problem by switching to inline CSS: https://ant.design/docs/react/use-with-next#using-pages-router

I was using the with-nextjs-generate-css-on-demand example.