子文件更改时重新加载整个 CSS 包

Question

我已经在我的 Rails 8 应用程序中设置了 Hotwire Spark v0.1.12，它具有 对 Sprockets 的基本支持。

HTML 重新加载工作得很好，但我无法让 CSS 重新加载正常工作。在我看来，这是因为 Spark 并未尝试加载我的

application.scss

，而是尝试重新加载已编辑的实际文件。

有人知道如何让它工作吗？

背景

我的

application.scss

包括很多

@import

：

...
@import 'partials/*';
@import 'layouts/*';
...

在不进行任何更改的情况下，当我编辑正在导入的 CSS 文件时，似乎什么也没有发生。我将以下内容添加到我的

development.rb

 中，以使 Spark 捕获我的编辑：

config.hotwire.spark.css_paths += %w[app/assets/stylesheets/layouts app/assets/stylesheets/partials]
config.hotwire.spark.css_extensions += %w[scss]

添加后，在编辑 CSS 文件时，例如

app/assets/stylesheets/layouts/frontpage.scss

，我会得到如下日志条目：

[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)

这似乎表明更改已被捕获，但没有重新加载正确的文件（

application.scss

）？

Answer 1

目前尚不支持此功能，因此您必须修补它：

# 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

我认为您不需要添加任何内容到

config.hotwire.spark.css_paths

。