Fingerprinting CSS File

Little help on fingerprinting the CSS file. I have only one CSS file. I wanted to fingerprinting.

<link rel="stylesheet" href='{{ "./css/style.css" | relURL }}' media="print" onload="this.media='all'">

Can you help me on how to fingerprint this?

Thank you

assets/css/style.css

.foo {
  color: red;
}

layouts/_default/baseof.html

...
{{ $style := resources.Get "css/style.css" | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
...

See https://gohugo.io/hugo-pipes/introduction/#asset-directory.

1 Like

you can add integrity

{{ $style := resources.Get "css/style.css" | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" />

not re-posted the first line from above, always needed!

1 Like

Little help…

Error: add site dependencies: load resources: loading templates: "/Users/sureshkumar/Documents/GitHub/thesitebuild/themes/statecitytheme/layouts/partials/footer.html:11:1": parse failed: template: partials/footer.html:11: undefined variable "$style"

Please post all of your code, not just this one line.

Hey Hi, It’s a private Repo.

If you like to see the code… I will send you the repo request.

Thank you
Suresh

No, just the code for this one file.

Sure, here is the footer file code.

If you need anything more let me know.

I already have critical CSS code at the header, hence adding the css file at the footer of the site.

There is no $style in this code. I guess it is not the one responsible for the error.

Please re-read my original response. You must:
a) Place your CSS in something like assets/css/
b) Access the CSS with resources.Get
c) Then do something with the resource (fingerprint, integrity)

1 Like

Yeah @jmooring I did tried your solution too. It didn’t worked.

Guess, I have to give you the whole repo access. Shall I dm you the access?

Found the solution for this!

The assets folder should be in the theme folder.

theme name → Assets → CSS

In my custom css setup it was everything in static as I had hard coded the css file.

Now after moving the location of assets folder into theme folder… it’s started to working.

@jmooring I missed your solution of adding the asset folder in theme folder. That was causing the issue. Now it’s solved.

Appreciate the help. @jmooring , @divinerites , @ju52

Hugo Pipes Introduction | Hugo (gohugo.io)

Use the theme asset directory for theme assets, all other should go to /assets
IF you don’t set another path in CONFIG

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