Struggling with Page Resources CSS file

support
1

I’m trying to introduce page specific CSS to my site using page resources. It seems like a simple concept but I can’t get it working and I’m not sure why, can somebody help please?

My file structure is:

content
  --- about
        --- index.html
        --- page.css

Simple, one html file and accompanying CSS.

In my css.html partial (the default Hugo one) I’ve added this

{{- with resources.Get "page.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- end }}

But there’s no sign of the link appearing, which I’m guessing means there’s something wrong and it’s not finding page.css.

2

Your code tries to find a global resource in your /assets directory. You want to find a page resource.

Assuming the current page is your context, change your code to.

{{- with .Resources.Get "page.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- end }}

See resources doc

1 Like
3

Thank you for that quick reply. So here’s an odd thing…

I did find that solution in another thread however it didn’t work. I tried it again, it didn’t work.

I had an old ‘about.scss’ file in there from some previous attempts which I wasn’t using. Deleted this file and that fixed the issue.

The about.scss file was not referenced anywhere in the code so this is either a bug or some other thing which I’m not aware of, probably the latter.

4

Unmarked solution because although it worked, it stopped working for no apparent reason. I’ve not changed any of that part of the code.

5
6

Do you mean the layouts/_partials/head/css.html file created when you run the command hugo new theme?

1 Like
7

from the symptoms, and that default statement, I also suppose your baseof and head templates are quite default.

So I would suppose the partial is called using partialCached, which means called once for the whole site and the page order order is non deterministic… It may work at one run and fails the next time.

If so the main problem is in the code around - that’s why we usually like it to have the full context instead of some snippets (guess that’s where @tyco want’s to point you.)

1 Like
8

@jmooring yes you are correct.

@irkode yes my baseof.html and head.html are (very nearly) still default.

I actually had another issue with it today where the CSS was applied on a different page so as soon as you mentioned ‘partialCached’ this made sense.

I’ve changed this now to ‘partial’ and it’s working as expected.

Thanks for spotting it! :grin:

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.