Hotwire-rails with asset pipeline: No css in devtools

1

Using latest hotwire-rails (and manually updating turbo-rails to v0.8.3) with importmap-rails 0.8.2 with asset pipeline (no webpacker)

In Firefox dev tools, the Debugger only lists my JS files, the stylesheets are missing.
The css is loaded, I can see it in Style Editor. Any tips how to see stylesheets in Debugger as normal? Is importmap-rails related to stylesheets?

Update: application.css is shown in Chrome & Chromium, so it’s just a Firefox issue. (sorry maybe this post isn’t really relevant here)

2

how are you loading the stylesheet(s)?

3

In the layout, conventional asset pipeline link to the app/assets/stylesheets/application.scss that has @import statements in it
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>

4

This is because Firefox network panel only shows responses from the server, it does not show non-requested browser cached assets (like chrome does).

see: 764958 - Network monitor doesn’t show network requests for cached content

If you check the box “Disable Cache” in the network panel you will then see the stylesheet loading from the server.

1 Like