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?

  • Please explain in objective terms what you mean by 'best'. Opinion-based/best practices questions are off-topic.
    – TylerH
    Commented Mar 9, 2020 at 14:56
  • Hi @atomicharri does my answer below help you in any way? If yes, Please Upvote(^) and accept as an Answer as it helped you & it will help others with similar question in future to find the correct answer easily. It also removes this question from "Unanswered questions" list. Commented Mar 10, 2023 at 9:15

2 Answers 2


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.


  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.

  • 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. Commented Mar 24, 2020 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? Commented Mar 24, 2020 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
    Commented Aug 26, 2021 at 14:55
  • Link #2 doesn't exist no more Commented Sep 23, 2022 at 18:28

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 and acknowledge you have read our privacy policy.

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