React项目渲染旧版CSS样式，新修改的CSS内容不生效如何解决？

常见原因及对应解决方法 #

• 浏览器缓存旧CSS资源
  优先尝试强制硬刷新页面：Windows系统按Ctrl+Shift+R，Mac系统按Cmd+Shift+R。也可以打开浏览器开发者工具，在「网络」面板勾选「禁用缓存」，只要开发者工具处于开启状态，页面就不会加载缓存的旧资源。
• 项目构建工具缓存旧文件
  停掉当前正在运行的开发服务，根据你使用的工具清理对应缓存后重启服务即可：
  • 使用Create React App：删除node_modules/.cache文件夹后重新执行npm start
  • 使用Vite：删除项目根目录下的.vite缓存文件夹后重启开发服务
    也可以同步删除项目下的build、dist等旧构建产物文件夹，避免残留文件干扰。
• 全局样式冲突
  检查项目中是否有其他CSS文件也定义了同名的.left类，全局作用域的CSS会出现同名样式覆盖问题。如果是多组件样式冲突，建议改用CSS Modules、CSS-in-JS（如styled-components）等方案给样式添加独立作用域，避免全局污染。
• CSS文件引入错误
  确认你修改的CSS文件已经被正确引入到对应组件或者项目入口文件中，检查引入路径是否指向了其他目录下的旧CSS文件。

问题相关截图 #

CSS文件原始代码

开发者工具中渲染后的额外样式

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