How to integrate External CSS Librairies in SAPUI5/UI5/Fiori

[corporateuser]

Similar to #802 we would like to externalize one of the css bundles, which is used in several Fiori applications. Currently css bundle has size of 200 KB, and used only in couple of applications, so bundling it together with several apps works. But in total we have more than 30 applications and what if we'll need to add it everywhere? Taking in account that maximum space available in html5-repo is 100 MB it could be depleted quite fast.

Any possibilities to do something like sap.ui.loader.config but for CSS files?

[flovogt]

Thanks for creating this enhancement request. The requirement you describe can be already achieved by creating an own theme library. I know its not exactly what you are asking for but for the time being this might solve your requirement.

[corporateuser]

Hello, for now I'm trying to resolve the issue with the following code inside controller:

const monacoCssUri =
      window.location.hostname === 'localhost'
        ? 'http://localhost:4800/style.css'
        : '/ace/comsapaceservicemonaco/style.css';
includeStylesheet(monacoCssUri);

It should help as well, isn't it?

[matz3]

Got it. What you could do then, is configuring a loader path mapping depending on the location.hostname and use sap.ui.require.toUrl to get the resolved url for that module ID.

sap.ui.loader.config({
  paths: {
    'ace/comsapaceservicemonaco/style.css': window.location.hostname === 'localhost'
      ? 'http://localhost:4800/style.css'
      : '/ace/comsapaceservicemonaco/style.css'
  }
});

includeStylesheet(sap.ui.require.toUrl('ace/comsapaceservicemonaco/style.css'));

The same concept can be used for any other asset that needs to be loaded from a specific path.

EDIT: You can also map the whole namespace ace/comsapaceservicemonaco, so that every module within will use the mapped path. Details on how this works exactly can be found in the sap.ui.loader.config API Reference.