Next.js 部署到 Vercel 后 CSS 样式丢失是怎么回事？

书生シ伊芃提问于 2026-03-22 22:06:22 阅读 5

框架

我在本地开发时样式完全正常，但一部署到 Vercel 上，某些页面的 CSS 就不生效了，特别是全局样式里的自定义类。我试过把 CSS 放在 globals.css 里引入，也检查了 _app.js 的配置，都没问题。是不是 Vercel 对 CSS 的处理有什么特别要求？

比如下面这段简单的样式，在本地能正确显示红色背景，但线上就是白底：

.hero-banner {
  background-color: #ff0000;
  padding: 4rem 2rem;
  color: white;
  text-align: center;
}

React框架服务端渲染

我来解答赞 1 收藏

反馈

1 条解答

议谣 ☘︎ Lv1

遇到这种问题确实挺头疼的，可以试试这样解决。首先确保你的全局样式文件 globals.css 正确地被 Next.js 引入了。通常做法是在 _app.js 文件中导入它，像这样：

pre class="pure-highlightjs line-numbers">

import '../styles/globals.css'



function MyApp({ Component, pageProps }) {

  return 

}



export default MyApp

其次，检查一下你的 next.config.js 文件，确保没有对 CSS 处理做特殊配置，有时候自定义配置可能会导致问题。

最后，有时候缓存问题也会导致样式不更新，你可以尝试清除浏览器缓存，或者强制刷新页面（通常是按住 Shift 键的同时点击刷新按钮）。

如果以上都做了还是有问题，可以尝试在 globals.css 中给 .hero-banner 类加个 !important 来排除其他样式覆盖的可能性，不过这只是临时解决方案，最好找到根本原因。

希望这些建议能帮到你！

2026-03-22 22:11