Rails 7开发环境assets无法自动预编译 样式修改后不刷新

问题详情 #

您好
我使用的Rails 7.0.4应用在开发环境下无法按预期完成资源实时编译。

预期表现 #

开发环境下重载浏览器时自动加载最新样式，无需额外手动操作。

实际异常行为 #

在app/assets/stylesheets/application.scss中新增样式后，必须手动执行rails assets:precompile命令再重启服务器才能看到样式变更；仅执行预编译或仅重启服务器都无法刷新样式。

已尝试操作 #

• 在environments/development.rb中添加配置config.assets.compile = true，无效果，该配置本身是开发环境默认配置。
• 测试hotwire-livereload gem：修改视图时刷新正常、响应速度快，但完全无法解决样式表变更不生效的问题。

疑问 #

该应用最初基于Rails 7.0.2搭建，之后通过修改Gemfile中gem版本升级到Rails 7.0.3，后续升级到7.0.4，版本升级操作是否可能引发该问题？
感谢解答
Chris #

解决方案 #

版本升级是这类资产加载异常的常见诱因。Rails 7对资产管线做了较大调整，跨小版本升级时如果配置未同步、存在旧预编译残留，就会出现你描述的问题，按以下步骤修复即可：

• 清理预编译残留资产
  开发环境下如果public/assets目录存在历史预编译产物，Rails会优先加载该目录下的静态文件，完全跳过运行时编译流程，这是该类问题最高发的原因。直接执行命令删除所有预编译残留：

  rails assets:clobber
  

  执行完成后不要手动运行资产预编译命令，直接重启开发服务器测试即可。
• 核对开发环境资产核心配置
  打开config/environments/development.rb，确认以下资产相关配置和Rails 7.0默认开发环境配置一致，排除旧版本配置残留或错误配置的影响：

  # 开启运行时资产动态编译
  config.assets.compile = true
  # 开启资产调试模式，不合并压缩资源，实时检测源文件变更
  config.assets.debug = true
  # 开发环境关闭资产指纹，避免缓存旧文件
  config.assets.digest = false
  # 关闭资产缓存
  config.assets.cache_store = :null_store
  

• 排查资产管线gem冲突
  Rails 7.0开始默认使用Propshaft替代Sprockets作为资产管线，版本升级时很容易出现两个管线gem共存、版本不匹配的问题：
  • 如果使用默认Propshaft：确认Gemfile中propshaft版本和Rails 7.0.4匹配，移除多余的sprockets-rails引用避免冲突。
  • 如果仍使用Sprockets：确认sprockets-rails版本不低于3.4.0，同时检查app/assets/config/manifest.js已正确引入样式表目录：

    //= link_tree ../stylesheets .css
    

• 补充hotwire-livereload监听配置
  如果完成以上配置后，视图变更可以正常刷新但样式变更无法触发自动重载，在开发环境配置中添加样式目录监听规则：

  config.hotwire_livereload.listen_paths << Rails.root.join("app/assets/stylesheets")
  

以上配置全部调整完成后重启开发服务器，修改scss文件后刷新浏览器即可加载最新样式，无需手动执行预编译或反复重启服务。 #

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