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]

https://github.com/ant-design/create-next-app-antd/assets/12603244/2ec1e4f5-376b-49f2-85b1-d695c803ad46

[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.

[zkboys]

可以通过自定义server，启动一个static服务实现，代码片段如下：

// genAntdCss.jsx 文件关键代码：
const res = `_antd/static/css/${dir}/${fileName}`;

// server.js 文件关键代码：
server.use('/_antd', express.static( path.resolve(__dirname, '../../.next'), { maxAge: '1y' }));
// 实际访问地址为：https://xxx.com/_antd/static/css/antd-output/antd.min.dc89c7a8.css