2

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?

1
  • Please explain in objective terms what you mean by 'best'. Opinion-based/best practices questions are off-topic.
    – TylerH
    Mar 9 '20 at 14:56
6

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 everytime 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.
5
  • 1
    Hi @atomicharri, Does this answers your question? If Yes, please upvote and accept it as an answer so that it will help others in future to find the correct answer easily. Mar 23 '20 at 9:16
  • 1
    Hi Ganesh, yes this was very helpful! The only problem I'm having now is that it seems to load jQuery intermittently. I thought creating an application customiser would make it more stable but it still seems to only work half the time. Mar 24 '20 at 0:54
  • 1
    Have you loaded jquery in your SPFx package using npm install jquery ? Are you getting any error in browser console where jquery file is not loading? Mar 24 '20 at 4:20
  • I think this is a useful Q&A for reference. I edited the main question to remove the subjective words so the flag could be removed.
    – Tom Resing
    Aug 26 '21 at 14:55
  • Voted to re-open this question. Aug 26 '21 at 17:34
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.