I've set up Hotwire Spark v0.1.12, which has basic support for Sprockets, in my Rails 8 app.
HTML reloading works just fine, but I'm unable to get CSS reloading to work properly. It seems to me that this is because Spark isn't trying to load my application.scss
, it rather tries reloading the actual file that was edited.
Anyone know how to get this working?
My application.scss
includes a lot of @import
s:
...
@import 'partials/*';
@import 'layouts/*';
...
Without making any changes, nothing seemed to happen at all when I edited the CSS files that are being imported. I added the following to my development.rb
to make Spark catch my edits:
config.hotwire.spark.css_paths += %w[app/assets/stylesheets/layouts app/assets/stylesheets/partials]
config.hotwire.spark.css_extensions += %w[scss]
With that addition, when editing my CSS files, for example app/assets/stylesheets/layouts/frontpage.scss
, I get log entries like this:
[ActionCable] Broadcasting to hotwire_spark: {:action=>:reload_css, :path=>"/frontpage.scss"}
Hotwire::Spark::Channel transmitting {"action"=>"reload_css", "path"=>"/frontpage.scss"} (via streamed from hotwire_spark)
This seems to indicate that the change is getting caught, but not reloading the correct file (application.scss
)?
There is no support for this yet, so you have to patch it:
# config/initializers/spark.rb
class Hotwire::Spark::Change
private
def reload_message
# ---
# {action: action, path: canonical_changed_path}
# +++
if action == :reload_css
{action:, path: "/application.css"}
else
{action:, path: canonical_changed_path}
end
end
end
https://github.com/hotwired/spark/blob/v0.1.12/lib/hotwire/spark/change.rb#L20