Forum Discussion
What is the best practice to inject js or css files in PnP Template Provisioning
I am using PnP template provisioning xml templates. I would like to inject some js and css files like for example jquery. I try to do this with the custom action but I don't like this solution. I do it now like this:
<!-- css -->
<pnp:CustomAction Name = "CustomCss" Location = "ScriptLink" Sequence = "1003" ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="{sitecollection}/Style%20Library/Custom/custom.css?v=1.0"></link>');" />
<pnp:CustomAction Name = "CustomCss" Location = "ScriptLink" Sequence = "1003" ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="{sitecollection}/Style%20Library/Custom/custom.css?v=1.0"></link>');" />
<!-- js -->
<pnp:CustomAction Name = "jquery" Location = "ScriptLink" Sequence = "0" ScriptBlock = "
 var headID = document.getElementsByTagName('head')[0]; 
 var newScript = document.createElement('script');
 newScript.type = 'text/javascript';
 newScript.src='{sitecollection}/Style%20Library/custom/jquery.js?v=1.15';
 newScript.id = 'jquery';
 headID.appendChild(newScript);" />
1 Reply
For css you can use the Alternate CSS option under master page setting if that is available to you.
For JavaScript, I would use a custom action that points to a single JavaScript file that is then responsible for loading all the required scripts in the correct order of dependencies.
There is a really nice extension for Google Chrome (SP Editor) that lets you add a script action without having to execute any code! (another easy option is to use PnP PowerShell)
