Inject CSS in Plugin

Development Plugin Development
1

I am currently working on implementing a plugin which is based on custom css.
Therefore I need to inject the styles into the application. Since I am quite new to indico I am also quite clueless on how to achieve the import. I read about an inject-css function but it seems to be deprecated.
Therefore I would be delighted if someone could help me with this topic.

Thanks in advance

2

inject_bundle is what you’re looking for. It’s best if you check our existing plugins on GitHub for examples…

3

Just wondering, Search · inject_bundle · GitHub doesn’t show any examples of injecting a CSS file, only JS files. Are there examples with CSS files as well? And is it possible to inject a CSS file only in the payment process, but not to all pages of a specific type?

4

CSS and JS are handled the same way. Inject the bundle into the WP class that’s used on the page where you want to inject it.

5

Hi,
Sorry but I don’t get it. Under my plugin folder I have a css file inside a folder as I see in the examples: “static/client/style.css” (also tried placing it just under “static/style.css”) .
Then in my plugin class init() method I use this code:
self.inject_bundle(‘style.css’, WPRequestsEventManagement)
But I don’t see my css loaded at all.
Can you tell me what’s wrong with this? Where should I put my css and then inject it? Should it be a .css file or a .scss file?
Thanks

6

It depends what you configure in the webpack-bundles.json, see e.g. https://github.com/indico/indico-plugins-cern/tree/master/vc_assistance

7

And of course you need to use the indico build-scripts (./bin/maintenance/build-wheel.py plugin --add-version-suffix <path to your plugin>

8

sorry, I forgot to include that in my comment. This is what I have:

{
    "entry": {
      "main": "./style.css"
    }
  }
9

ah! this step I did not do. We don’t have an “Indico development” site (our dev server has a production install)
I see that that script is not available to me.
So there’s no other way I can get this css to be picked up by my plugin?
Thanks for your response

10

You MUST use a dev install to do well… development. Having a ‘dev server’ for testing is a good idea (usually people call this “staging” or “qa” though), but for actual development tasks you need to have a dev setup. Typically that’s locally on each developer’s PC or some virtual machine…

11

I understand. I am using the indico-container you’ve provided for my local development and there I can’t find the script either

12

Our containers don’t work well for this: The container we publish is a production build/environment and not a development setup.

13

Got it. Thanks for your response!