修改SCSS子文件时如何重载完整的CSS打包文件？

你的问题核心是Hotwire Spark默认会直接重载被修改的单个SCSS子文件，但你的样式依赖Sprockets通过application.scss的@import合并所有子文件，所以必须让Spark触发主入口文件的重载，而不是单个子文件。

解决步骤如下：

• 修改config/environments/development.rb中的Spark配置，移除之前添加的css_paths，改用css_entry_points指定你的主样式入口文件：

# 删掉这行：config.hotwire.spark.css_paths += %w[app/assets/stylesheets/layouts app/assets/stylesheets/partials]
config.hotwire.spark.css_extensions += %w[scss]
# 指定主入口，子文件变化时会触发该文件的重载
config.hotwire.spark.css_entry_points = %w[application.scss]

• 如果你有多个样式入口（比如admin.scss），可以一并加入：

config.hotwire.spark.css_entry_points = %w[application.scss admin.scss]

原理：css_entry_points会告诉Spark，当它检测到任何监控路径下的SCSS文件变化时，不再单独重载修改的子文件，而是重新编译并重载你指定的入口文件，这样Sprockets的@import合并逻辑会生效，修改后的样式会正确加载到页面中。

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