Cannot add multiple css files in html page layout

Question

I need to include multiple css files in one HTML Page Layout - a webfont, bootstrap, and my own custom styles. The only thing that loads is my custom styles -- I can tell from checking the sources in Chrome Dev Tools. The url pathways are correct. Additionally, I have the corresponding script files loaded underneath it [jquery, popper, and bootstrap] in simple <script> tags. All three of those files load fine.

I have placed my css links after 'AdditionalPageHead' in the html page layout. Has anyone else ever encountered this? I do not understand why it loads my custom styles, and bypasses everything else. I'm using 2013 OnPrem.

My css-links look like this:

<link href="\path\bootstrap.min.css" type="text/css" rel="stylesheet" />

<link href="\path\fontawesome.min.css" type="text/css" rel="stylesheet" />

<link href="\path\style.css" type="text/css" rel="stylesheet" />

Answer 1

Try below solutions:

Solution 1:

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"/>

Solution 2:

First, you need to find the following lines of code in the head of the Page Layout's HTML page:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

After those three lines you are free to add <link> tags, with the following caveat: use the ms-design-css-conversion="no" attribute within the <link> tag to "exclude the style sheet from theming".

In the end, you should have a <link> tag that looks as follows:

<link href="MyPageLayout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />

Where to add styles in page layouts