How can I include the same JS and CSS files on multiple SharePoint Modern Page?

Question

I'm looking for a way to include JS and CSS files into a SharePoint Modern page, which can be done once across a number of pages. At the moment I've got the Script Editor web part to include my JS and CSS files but this is not ideal as there are a large number of pages and the resulting effects are sometimes unreliable.

How can I get these files included in the page (preferably in the head) without significant development?

Answer 1

I think best way to include JS and CSS files into a SharePoint Modern page is using SPFx Application Customizer.

SPFx application customizer will be loaded on all existing and newly created modern pages in SharePoint.

Downside of using Script Editor web part is you have to add the same code on each page every time you create a new page in your site.

References:

1. Build your first SharePoint Framework Extension.
2. Inject Custom CSS on SharePoint Modern Pages using SPFx Application Extensions.
3. Step By Step Procedure To Add A JS File To All Pages In A SPFx Modern Pages Using SharePoint Framework Extension.

---

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

Answer 2

Application Customizer can be the better option to add script/css to Modern Page:

Inject Custom CSS on SharePoint Modern Pages using SPFx Extensions

SharePoint Online Branding Inject CSS

Script Editor Web Part can't be used in ListView Page, while Application Customizer can be used for All Modern Page.