What is the best practice to inject js or css files in PnP Template Provisioning

[Khalid Hajjouji]

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('&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{sitecollection}/Style%20Library/Custom/custom.css?v=1.0&quot;&gt;&lt;/link&gt;');"  />

 <!-- js -->

 <pnp:CustomAction Name = "jquery"   Location = "ScriptLink" Sequence = "0" ScriptBlock = "&#xD;&#xA; var headID = document.getElementsByTagName('head')[0]; &#xD;&#xA; var newScript = document.createElement('script');&#xD;&#xA; newScript.type = 'text/javascript';&#xD;&#xA; newScript.src='{sitecollection}/Style%20Library/custom/jquery.js?v=1.15';&#xD;&#xA; newScript.id = 'jquery';&#xD;&#xA; headID.appendChild(newScript);" />

[#2]

Hi @Khalid Hajjouji

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)