Using an additional specific css style for a page

1

I am trying to use the Page Resources feature in order to have a specific css style file for a given page.
I did it as follows:

  • adding the resource in the page bundle with the frontmatter of the page
resources:
  - src: test.css
    title: style

and adding the file test.css in the page directory.
Note that this file should be in addition of the basic style of the main theme

  • in the single layout I put the following code
{{ with $.Resources.GetMatch "**.css*" }}
{{ $style := . | minify | fingerprint }}
<link type=text/css rel="stylesheet" href="{{ $style.Permalink }}">
{{ end }}

I guess it should work (note that I am not a coder)
But please advise or correct if it’s the proper way to do it or if it exists any other cleaner and simpler option (more Hugo oriented if any)

Please advise

2

Does it?

3

Yes, it works!

4

Based on my testing this morning, I suspect this works when you build your site with hugo, but fails to update upon changes to your site when running hugo server.

When using Hugo Pipes, the documentation states that:

Asset files must be stored in the asset directory. This is /assets by default, but can be configured via the configuration file’s assetDir key.

You, on the other hand, are attempting to use Hugo Pipes in conjunction with Page Resources. This combination is undocumented, and at least one other person has encountered the problem I described above:

Question for @bep (sorry):

Is processing of Page Resources with Hugo Pipes a supported operation when running hugo and hugo server?