How to add external css file in html file design

Question

I used design manager to create Master Page. it was created without error or warning and i did apply it to pages.

I want to add custom css file to master page as this block code

 <SharePoint:CssRegistration ID="CssRegistration3" Name="<% $SPUrl:~sitecollection/StyleLibrary/ABC/css/SP.ABC.Main.css %>" runat="server" />

As you know, the problem when using <SharePoint:CssRegistration ID="CssRegistration3" Name="/StyleLibrary/ABC/css/SP.ABC.Main.css" runat="server" /> is that the url of this css file is uncorrect when sitecollection is created with explicitly named path (for example, http://server/sites/team).

I used snippet generator in design manager to generate the code block and embed to my html design file, but it would throw exception at the very line i place the code block.

<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:  <SharePoint:CssRegistration ID="CssRegistration3" Name="<% $SPUrl:~sitecollection/StyleLibrary/ABC/css/SP.ABC.Main.css %>" runat="server" />-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->

Could you tell me the workaround for this case? another way to place external css file that will work in any cases?

Thanks.

Answer 1

You need to use <MS> and <ME> tags which denote the beginning and end of a SharePoint control or a snippet. The <SPM> tag ("SharePoint markup") which you have used actually is used for registering a SharePoint namespace. So, the code should be:

<!--MS:<SharePoint:CssRegistration ID="CssRegistration3" Name="<% $SPUrl:~sitecollection/StyleLibrary/ABC/css/SP.ABC.Main.css %>" runat="server" />-->
<!--ME:</SharePoint:CssRegistration>-->

UPDATE

Try replacing < to < and > to %>. That is

Name="<% $SPUrl:~sitecollection/StyleLibrary/ABC/css/SP.ABC.Main.css %>"

See more at: http://msdn.microsoft.com/en-us/library/office/jj822370(v=office.15).aspx