Link CSS file to a partial template in Hugo

Question

Is it possible to link a CSS file to a partial template in Hugo?

I have a partial template that just has a navigation. For example something like this:

<ul>
 <li>Menu Item 1</li>
 <li>Menu Item 2</li>
 <li>Menu Item 3</li>
 <li>Menu Item 4</li>
</ul>

I'm using Sass and I have a Sass file for the navigation - nav.scss which will be output as nav.css .

My requirement is to load nav.css only when the navigation partial template is used. Is this possible with Hugo?

Answer 1

My requirement is to load nav.css only when the navigation partial template is used. Is this possible with Hugo?

No this isn't possible with Hugo at this time.

The best workaround is probably to replicate the same logic that determines whether the partial is inserted. For instance, if you only include the navigation partial on the homepage:

{{ if .IsHome }}
    {{ partial "nav.html" . }}
{{ end }}

Then you'd replicate that logic in your theme's header for loading the nav.css file:

{{ if .IsHome }}
    <link rel="stylesheet" href="/assets/nav.css">
{{ end }}