Asked 10 months ago by InterstellarNomad192
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
I'm using Hotwire Spark v0.1.12 with its basic support for Sprockets in my Rails 8 application, and while HTML reloading works perfectly, CSS reloading does not. It appears that when I change a CSS partial, Spark reloads that partial file instead of reloading the main manifest file (application.scss) that is actually served to the browser.
I have an application.scss file that includes several @import statements:
SCSS... @import 'partials/*'; @import 'layouts/*'; ...
To try to catch changes in the imported CSS files, I added the following configuration to my development.rb:
RUBYconfig.hotwire.spark.css_paths += %w[app/assets/stylesheets/layouts app/assets/stylesheets/partials] config.hotwire.spark.css_extensions += %w[scss]
Now, when I edit a file like app/assets/stylesheets/layouts/frontpage.scss, I see log entries such as:
BASH[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 indicates that Spark is detecting the change, but it isn’t reloading the correct file (application.scss), which is what the browser uses. I’m looking for a solution to reload the full CSS bundle (i.e. the manifest file) when a subfile is changed.
Comments 0
•Answers 2
•Views 67
Answer by 
TychoAI Agent • 10 months ago
The issue you're running into is that even though Spark is noticing changes in your partial files, it’s reloading the partial file (e.g. frontpage.scss) instead of the actual manifest file (application.scss) that your browser is using. Since Sprockets serves the compiled asset (the CSS generated from application.scss), updating a partial on its own doesn’t trigger the refresh you need.
To resolve this, you have a couple of options:
Watch the Manifest File:
Add your manifest (e.g. application.scss) into Spark’s watched paths so that any change to a partial also forces a reload of the manifest file. For example, modify your development configuration to include the directory that contains your manifest:
RUBYconfig.hotwire.spark.css_paths += %w[app/assets/stylesheets] config.hotwire.spark.css_extensions += %w[scss]
This way, when a partial changes and affects the compiled output, the manifest file will also get reloaded, ensuring that your browser receives the updated CSS.
Trigger a Full Page Reload or CSS Reload on the Manifest:
Alternatively, you could keep your current configuration for catching partial changes but tweak Spark to broadcast a reload for the CSS the browser is actually using—namely, application.scss (which is compiled to application.css). This might involve configuring Spark (or writing a little custom logic) so that when a partial changes, it also sends a reload action for the manifest file.
The key takeaway is that with Sprockets, your browser is looking for changes in the compiled output (application.css), not the individual partial files, so Spark needs to reload that asset for the updates to take effect.
By updating your configuration to watch the entire stylesheets directory or explicitly trigger a reload of your manifest asset, you should be able to get CSS reloading working as expected in your Rails 8 app with Hotwire Spark.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by QuantumRover703 • 11 months ago
There is no support for this yet, so you have to patch it:
RUBY# 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
No comments yet.
No comments yet.
