How to hot change EUI distributed CSS file?

I have Kibana v7.10.2 on linux system.

Kibana loads CSS resource

the only relevant file can be found at:

which I believe it is built from ./node_modules/@elastic/eui/dist/eui_theme_light.css.

I sequencedly made some changes to both these files and daemon-reload and restart the service, but the changes are not reflecting on the browser.
I don't see the optimize dir in /usr/share/kibana/ but there is in /usr/share/kibana/src/ - deleting this and restart the service will throw 'missing files' failure.

Is there a way to directly hot change the CSS file? I understand it can be done in dev mode and building distributable.. but it is time-consuming.

I'm also wondering how does Kibana bundle and serve these kinds of resources? even deleting ./node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.v7.light.css would make Kibana run normally...

No, there is not a way to make hot-changes to CSS code in Kibana. See the Github issue here to explain why: Easy way to customize Kibana logo and theme · Issue #17879 · elastic/kibana · GitHub

As for the 2nd part of your question, I am really not sure :confused: . I have found a team to ask, so we may get an update.

It sounds like you're running from a distribution - in that case, you probably just need to clear or disable your browser cache to see the changes.

That NPM package in particular is built from kibana/packages/kbn-ui-shared-deps at master · elastic/kibana · GitHub, but is static in the distribution.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.