Custom CSS reference in Page Layout

Question

I want to refer Custom CSS in my Page Layout

Page Layout

<link href="&#60;%$SPUrl:~sitecollection/Style Library/Test/Custom.css %&#62;" rel="stylesheet" type="text/css" ms-design-css-conversion="no"  runat="server"/>

Page-> View Source Below

<link href="/sites/UAT/_catalogs/masterpage/&lt;%$SPUrl:~sitecollection/Style Library/Test/Custom.css %>" rel="stylesheet" type="text/css"></link>

Actual CSS

/sites/UAT/Style%20Library/Test/Custom.css

Answer 1

Styles

If your page layout is an HTML file, try this:

<!--SPM:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Test/Custom.css %&#62;" runat="server" after="corev15.css"/>-->

If it'is an .aspx file, try this:

<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Test/Custom.css %&#62;" runat="server" after="corev15.css"/>

Scripts

HTML masterpage:

<!--SPM:<SharePoint:ScriptLink language="javascript" Name="~SiteCollection/Style Library/Test/Custom.js" runat="server" Localizable="false"/>-->

aspx masterpage:

<SharePoint:ScriptLink language="javascript" Name="~SiteCollection/Style Library/Test/Custom.js" runat="server" Localizable="false"/>