CSS Minify and Fingerprint

1

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.

2

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?

3

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' />