topic Re: How to use CSS inside nebula.js extension framework in QlikView

How to use CSS inside nebula.js extension framework

WhoAmI — Mon, 26 Jan 2026 16:26:21 GMT

Hello,

the use of CSS inside a extension is only be teached here: https://qlik.dev/extend/build-extension/extensions-load-resources

But this is for the old extension not for the new nebula.js framework.

I want to use the Leonardo UI Icons but this is not possible.

I am import the css file inside the index.js file

import "leonardo-ui/dist/new/leonardo-ui.min.css";

Any help would be great.

Re: How to use CSS inside nebula.js extension framework

tens — Fri, 28 Apr 2023 23:27:43 GMT

I'm looking for same thing. I'm actually trying to reverse engineering this repo: https://github.com/qlik-oss/sn-scatter-plot/tree/main/examples/plugins to understand how they are using css. Don't know if it can help you.

Re: How to use CSS inside nebula.js extension framework

tens — Sat, 29 Apr 2023 15:06:22 GMT

For me, it's working with this code:

import { useElement, useLayout } from '@nebula.js/stardust'; import properties from './object-properties'; import data from './data'; import ext from './ext'; import './style.css'; import 'leonardo-ui/dist/leonardo-ui.css' /** * Entrypoint for your sense visualization * @param {object} galaxy Contains global settings from the environment. * Useful for cases when stardust hooks are unavailable (ie: outside the component function) * @param {object} galaxy.anything Extra environment dependent options * @param {object=} galaxy.anything.sense Optional object only present within Sense, * see: https://qlik.dev/libraries-and-tools/nebulajs/in-qlik-sense */ export default function supernova(galaxy) { return { qae: { properties, data, }, ext: ext(galaxy), component() { const element = useElement(); const layout = useLayout(); console.log(layout); element.innerHTML = `<button class="lui-button">${layout.props.buttonLabel}</button>`; }, }; }

Re: How to use CSS inside nebula.js extension framework

WhoAmI — Tue, 02 May 2023 07:41:41 GMT

The code from you is working, but for me, what is not working is to use icons from leonardoui.

/**
* Entrypoint for your sense visualization
* @param {object} galaxy Contains global settings from the environment.
* Useful for cases when stardust hooks are unavailable (ie: outside the component function)
* @param {object} galaxy.anything Extra environment dependent options
* @param {object=} galaxy.anything.sense Optional object only present within Sense,
* see: https://qlik.dev/libraries-and-tools/nebulajs/in-qlik-sense
*/
export default function supernova(galaxy) {
return {
qae: {
properties,
data,
},
ext: ext(galaxy),
component() {
const element = useElement();
const layout = useLayout();

console.log(layout);
element.innerHTML = "<span class='lui-icon lui-icon--play' aria-hidden='true'></span>";
},
};
}

Any further ideas?

Re: How to use CSS inside nebula.js extension framework

tens — Thu, 04 May 2023 07:16:59 GMT

I tried to add icon in my extension, and I notice when you import your extension extension, leonardo is already used by qlik and so icon appear without adding any dependencies.

Re: How to use CSS inside nebula.js extension framework

WhoAmI — Thu, 04 May 2023 11:16:11 GMT

Doesnt work by me, frustrating. For example using this icon wont work:

lui-icon--print

https://qlik-oss.github.io/leonardo-ui/icons.html

Re: How to use CSS inside nebula.js extension framework

tsm — Thu, 21 Dec 2023 12:19:09 GMT

Your extension should load what it needs and not rely on qlik sense to provide it. Any css loaded by the client might change, and specifically leonardo-ui is legacy code and will be removed.

The point of an external Extensions API such as Nebula is that we don't need to rely on the Sense code base to provide certain things, thus removing the need for loading all that code only to display a chart.