Loading CSS from a node module into jlab extension

hi

working on the RISE jlab extension, and learning a lot about typescript and webpack in the process…

I’d need to programmatically load/unload CSS from the reveal.js module

for reference, in the context of the classic notebook, we use something like this

let theme = complete_config.theme;
let theme_path = `./reveal.js/css/theme/${theme}.css`;
$('head').prepend(
  `<link rel="stylesheet" href="${require.toUrl(theme_path)}" id="themecss" />`);
// Add reveal css
let main_path = "./reveal.js/css/reveal.css";
$('head').prepend(
  `<link rel="stylesheet" href="${require.toUrl(main_path)}" id="revealcss" />`);

the trick being that this method provides for easy unloading of these stylings - which is crucial in our case when leaving slideshow mode.

now trying to achieve something similar within jlab, I have run into quite a few issues, and so far have not found my way out; I did manage to fool ts and to use require to import the main Reveal javascript object in my own code, but can’t for the hell of me find how to do this sort of dynamic loading for css.

I’d love a minimal guidance, in terms of the right tool for the job; I’ve seen mentions of various loaders available from within webpack, but have also read somewhere else in this forum that extensions had no control on their webpack config - which I apparently would need to edit for using these custom loaders

last but not least, I’m not even sure if this method of messing with the global <head> tag makes any sense in the context of jupyterlab where several slideshows may coexist - but I can’t answer this question yet as I can’t even grab the css object in the first place.

so again, any hint would be much appreciated - thanks in advance, and for the hard work !

Hi @parmentelat! For our dynamic theme loader, we are using the HTML5 APIs directly to add stylesheets to the page and then remove them:


thanks for the tips, will come in handy when we have a chance to work on this topic again :slight_smile: