Plugin's CSS not effective

1

I have forked the clock plugin.

I can build it, and use it in the latest Grafana with a new name.

When I change or try to add to the CSS file nothing happens.

I am following these steps:

  • edit css file and save.
  • run grunt in topmost directory, get no errors
  • check dist directory- files changed
  • restart grafana daemon
  • reload browser page at clock plugin
    no change

What am I doing wrong?

2

Could it be a chrome caching problem? Have you tried opening Chrome Dev Tools and doing a hard reload (you can also click and hold on the refresh button in Chrome to do an “Empty Cache and Hard Reload”.

3

Thanks for your quick response. It was a good suggestion, but the real problem was a name-space collision when I did not rename clock-panel.css. Using the old clock and the new clock together on a dashboard meant the original css over-rode the new one.

4

2nd reply-

Daniel heres what I found today, if you can offer guidance, it would be much appreciated…

  • based on clock plugin, forked and building on server in plugins directory

  • never used React or Angular and quite rusty with JS-HTML-CSS, so I may not ‘get it’

changes made to clock-panel.css ( panel-title-text for example) change ALL plugins. This was not expected!

changes made to module.html (in-line styles) change only the clock plugin - this is expected

changing the panel title text size breaks react-grid-item: the re-sizable component fails to size itself to match the visible rectangle correctly. The result is panels that overlap.