How to use CSS inside nebula.js extension framework

[WhoAmI]

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.

[tens]

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.

[tens]

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>`;
    },
  };
}

[WhoAmI]

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

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 = "<span class='lui-icon lui-icon--play' aria-hidden='true'></span>";
},
};
}

Any further ideas?

[tens]

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.

[WhoAmI]

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

lui-icon--print

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

[tsm]

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.