Today, I will explain how we can easily inject custom .css and .js files in a modern SharePoint site.
I have to admit, this is not what Microsoft recommends you to do when it comes to customise your SharePoint design.
However, for some very particular scenarios, you might need to step up a bit and add your own CSS and JS codes there.
I had to create a wiki site which had to look very basic (same as the gov.uk site), with mainly content. So I had to strip the sharepoint bars and menus in addition to a very specific requirements, which were around the side navigation.
My task was to dynamically (or recursively) browse the “SitePages” folders and generate a three levels menus from the content of the “SitePages” library.
So, first you will need to create you SharePoint Framework Development environment.
In my previous article, I covered the steps required to prepare the dev environment.
1- Create a project folder
This step is optional, I will create a new folder in my desktop (did not want to overthink this), to host my project file.
2- Using Yeoman Generate, create a new project
Second, using the Yoman Generator, we will scaffold a new SPFx project.
I will call “yo” first, and select “@microsoft/sharepoint” scaffolding template.
3- Define the project type and details
This step is very important, you will need to make sure that you are:
- Selecting “Extension” as the type of client-side component,
- and, “Application Customizer” as the type of client-side extension.
I will call my solution SPInject (SharePoint-Inject).
4- The magic !
At this stage, you have an brand new SPFx project for an Application Customizer Extension.
You can type “code .” to open the project folder in VS Code, or you can just open the solution in your preferred IDE.
Assuming, you have already created your .css and .js files to the a location in SharePoint.
The next step, is to navigate to
“src/extensions/SpInjectApplicationCustomizer.ts” file, and locate the “onInit” function
Now, replace the “onInit” function’s code by the following:
5- Package and deploy your solution
Final stage of the process, package and deploy your newly created solution.
5.1 Package the solution
Back to your preferred terminal,
Run the following command to bundle the project
gulp bundle --ship
Next, we need to package the solution to generate the final .sppkg file.
gulp package-solution --ship
5.2 Deploy the solution
Once you have packaged your solution, a new .sppkg file will be created under “sharepoint/solution” folder.
You will need to import the .sppkg file to your SharePoint App catalogue and add the newly created app to your site.
Open source code
The entire code of the solution is available from my GitHub –> https://github.com/samirlogisam/