Hugo

CSS Minify and Fingerprint

I am having some issues with loading fingerprinted CSS files. When I set minification only, it seems to work, however, when I add fingerprinting, the CSS file does not seem to load at all.

I can see this code works on the local server “hugo server” when I load it but when moved to S3, it does not load the css file.

I just want to ask the community while I investigate whether it could be an S3 problem.

Working Code

{{ $css := resources.Get "css/style.css" }}
{{ $css_custom := resources.Get "css/custom.css" }}
{{ $style := slice $css $css_custom | resources.Concat "css/style.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink | absURL}}" type='text/css' media='all' />

Not Working Code

{{ $css := resources.Get "css/style.css" }}
{{ $css_custom := resources.Get "css/custom.css" }}
{{ $style := slice $css $css_custom | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint "sha512" }}
<link rel="stylesheet"
        type="text/css"
        href="{{ $style.Permalink | absURL }}"
        integrity="{{ $style.Data.Integrity }}" 
        media='all' />

I have tried using minify | fingerprint along without calling sha512 which defaulted to 256.

I would appreciate it if someone could point me in the right direction.

Hi there,

I’m not sure what you mean here: is the css file 404ing? or does $style.Permalink not print anything? is the css file present but empty?

Hi there,

CSS file is present, it is accessible, however, the CSS is not getting applied to the page.

After playing around with the code, I have removed absURL from the href line as follows and it is now loading.

href="{{ $style.RelPermalink }}"

It is somewhat confusing on why it was loading fine without fingerprint. I am not a coder and learning Hugo as I go. If someone knows the explanation, please do let me know.

{{ $css := resources.Get "css/style.css" }}
{{ $css_custom := resources.Get "css/custom.css" }}
{{ $style := slice $css $css_custom | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint "sha512" }}
<link rel="stylesheet"
        type="text/css"
        href="{{ $style.RelPermalink }}"
        integrity="{{ $style.Data.Integrity }}" 
        media='all' />