Rails 8 doesn't live update/refresh changes on CSS

Question

Using Rails 8, dartsass and puma-dev. I have puma-dev starting the Rails server, serving the page on abc.test. When I make changes on my scss, and refresh the browser, the changes don't apply. The only way for me to apply the changes is bin/rails dartsass:watch separately.

I read that if I run bin/dev, which will run the bin/rails s and bin/rails dartsass:watch then the changes would take place without separate process. But this would not run my app on abc.test.

My Procfile.dev:

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

My 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 "$@"

Answer 1

The issue you're experiencing is that puma-dev doesn't automatically run the dartsass:watch task when it starts your Rails application. Puma-dev simply runs your Rails server, but doesn't execute the full development environment setup that includes asset compilation watching.

I got two options for you.

Option A: Configure puma-dev to use bin/dev

# .puma-dev
# This script sets up a puma-dev configuration for a Rails application.
#!/usr/bin/env sh
exec bin/dev

Then restart puma-dev:

puma-dev -stop
puma-dev -install

Option B: Create a custom script that puma-dev can call

#!/usr/bin/env sh
# bin/puma-dev-start

# Start dartsass:watch in background
bin/rails dartsass:watch &
DARTSASS_PID=$!

# Function to cleanup background processes
cleanup() {
  echo "Stopping dartsass:watch..."
  kill $DARTSASS_PID 2>/dev/null
  exit
}

# Trap cleanup function on script exit
trap cleanup INT TERM EXIT

# Start Rails server in foreground
exec bin/rails server -p ${PORT:-3000}

Then create .puma-dev

ruby#!/usr/bin/env sh
exec bin/puma-dev-start

I'd recommend Option A as it's the cleanest approach. It leverages your existing bin/dev setup and ensures that all the processes defined in your Procfile.dev run together, while still allowing puma-dev to handle the domain routing to abc.test.

After implementing any of these solutions, your SCSS changes should automatically compile and be reflected when you refresh your browser at abc.test.

Note: I have not tested these two options.