Snippets/Load an additional JavaScript or stylesheet file on all pages

You can add snippets of JavaScript and CSS by editing special MediaWiki pages as described in Manual:Interface/JavaScript and Manual:Interface/Stylesheets. However, if you want to include additional scripts and stylesheet files without putting their contents on wiki pages, because you're using an external version control system or want to edit those files directly, this is a guide about how to include them.

This also solves the problem of CSS and Scripts not loading on special restricted pages like preferences or the login page.

Preparation
It's recommended to put your custom CSS and JavaScript files on a specific location, so you can track them during upgrades. In this example, those files will be inside a customizations folder, placed inside the MediaWiki installation folder.

We're going to use 3 files in this example:


 * : A stylesheet we want to load on all skins.
 * : A stylesheet we want to load only on the skin.
 * : A JavaScript file we want to load on all skins.

Code
This is an example code to add at the bottom of :

Javascript and associated CSS
To load a javascript and associated CSS for that Javascript use the following snippet. This adds a asynchronously load Javascript module and the CSS it requires. You might need an additional styles only module to avoid FOUC.

CSS only
To load CSS on the render critical path, use:

Scripts hosted externally
To add a script hosted externally, include it from the BeforePageDisplay hook:

Note:
 * 1) This bypasses the ResourceLoader dependency model
 * 2) This adds additional domains, which is a performance penalty on the website user
 * 3) You expose yourself to the security scope of the 3rd party website