Rails 8搭配puma-dev时CSS修改无法自动刷新的问题

问题概述 #

• 开发环境：Rails 8、Dart Sass、puma-dev
• 场景1：通过puma-dev启动Rails服务（绑定域名abc.test）时，修改SCSS文件后刷新浏览器无法看到样式变更，必须单独执行bin/rails dartsass:watch才能生效。
• 场景2：使用bin/dev通过foreman同时启动Rails服务和Dart Sass监听进程，能实现样式热更新，但应用无法通过abc.test访问。

当前配置文件 #

Procfile.dev #

web: bin/rails server
css: bin/rails dartsass:watch

bin/dev #

#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
  echo "Installing foreman..."
  gem install foreman
fi

exec foreman start -f Procfile.dev "$@"

解决方案 #

问题根源是bin/dev启动的Rails服务默认使用独立端口（如3000），未与puma-dev的域名映射机制关联。以下是几种可行的修复方式：

方式1：绑定Rails到puma-dev的socket #

puma-dev会为每个.test域名在~/.puma-dev/目录下生成对应的socket文件（对应abc.test的socket路径为~/.puma-dev/abc）。修改Procfile.dev的web命令，让Rails服务绑定到该socket：

web: bin/rails server -b unix://~/.puma-dev/abc
css: bin/rails dartsass:watch

方式2：端口转发映射 #

让Rails服务绑定到公开端口，再通过puma-dev配置转发：

1. 修改Procfile.dev，让Rails绑定到所有接口和指定端口：

web: bin/rails server -b 0.0.0.0 -p 3000
css: bin/rails dartsass:watch

2. 在~/.puma-dev目录下创建名为abc的文件，内容写入http://localhost:3000，puma-dev会自动将abc.test的请求转发到3000端口。

方式3：利用puma-dev环境变量 #

启动puma-dev时指定项目目录，让Rails读取puma-dev的socket环境变量：

1. 启动puma-dev：

puma-dev --dir /path/to/your/rails/application

2. 修改Procfile.dev的web命令：

web: bin/rails server -b unix://${PUMA_DEV_SOCKET:-~/.puma-dev/abc}
css: bin/rails dartsass:watch

验证 #

修改配置后执行bin/dev，启动完成后访问abc.test，修改SCSS文件并刷新浏览器，即可看到样式自动更新生效。

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