Typography组件本地正常渲染AWS部署异常问题求助

项目中使用Typography组件实现标题，本地执行npm run dev时显示正常，但部署到AWS后组件样式无法正常渲染。

渲染效果对比 #

• AWS渲染效果：
• 本地渲染效果：

相关代码 #

组件代码 #

<Typography className={cardStyles.heading}>Rent a room or the whole place</Typography>

样式代码 #

.heading{
  font-size: 22px;
  display:flex;
  justify-content: center;
  color: black ;
  margin: 16px 0px 0px 10vw; 
  margin-left: 10vw;
  padding-left: 20px;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  width: fit-content;
  max-width: 100vw;
}

解决方向 #

• 检查构建产物完整性：执行npm run build后，确认dist/build目录包含所有样式、字体等静态资源，部署时上传完整的构建文件夹，避免资源遗漏。
• 排查字体加载问题：League Spartan字体可能未正确部署，检查字体文件是否被打包到构建目录；若用CDN加载，确认是否存在跨域问题，可将字体放在项目静态目录，或用AWS S3托管并配置CORS。
• 验证CSS Modules配置：若使用CSS Modules，确认cardStyles.heading在构建后类名生成正常，AWS部署环境的CSS Modules配置无错误，避免类名被异常处理。
• 清理缓存：AWS CloudFront或S3的缓存可能导致旧样式未更新，尝试清理缓存，或在构建时给静态资源添加哈希后缀（如Vite、Create React App默认配置），确保浏览器加载最新资源。
• 检查样式优先级：通过浏览器开发者工具查看元素计算后的样式，排查是否有全局样式或其他高优先级规则覆盖了.heading的样式。

内容的提问来源于stack exchange，提问作者lams