保罗的小宇宙
·
记一次升级 Nuxt 4 的诡异问题
💡
原文中文，约5900字，阅读约需14分钟。
📝
内容提要
将 Nuxt 从 3 升级到 4 后，CSS 样式丢失，原因是 CSS Modules 的哈希不一致。通过将文件后缀改为 .css，成功解决了问题，避免了复杂配置。最终确认所有 .module.less 文件应改为 .module.css，以彻底修复该 Bug。
🎯
关键要点
- 将 Nuxt 从 3 升级到 4 后，CSS 样式丢失，原因是 CSS Modules 的哈希不一致。
- 问题出在 styles.module.less 文件，客户端和服务端生成的 CSS Hash 不一致。
- 修复方案是在 nuxt.config.ts 中配置 generateScopedName，确保两次构建使用相同的规则生成类名。
- 修改文件后缀名为 .css 也能解决问题，避免复杂配置。
- Vite 在处理 CSS 预处理器时，SSR 和客户端构建的路径处理方式不同，导致哈希不一致。
- 将所有 .module.less 文件改为 .module.css 是彻底修复该 Bug 的方法。
- 使用 generateScopedName 解决方案可以绕过哈希不一致的问题，但不如直接修改后缀名简单。
- 问题的触发条件是 .module.less 文件只被单个页面引用，导致 Vite 生成的模块 ID 不一致。
- 总结：彻底修复需要将所有 .module.less 文件改为 .module.css，或修改 generateScopedName 配置。
➡️
