I tried loading a CSS file that was created by concatenating multiple CSS files, but I might be doing it incorrectly?

support
1

Hello,
I created a new site and theme with Hugo using the following commands:

$ hugo new site website
$ cd website
$ hugo new theme customtheme

In the customtheme/layouts/partials directory, there is a snippet that loads a CSS file. I assume this is the correct way to do it, as it comes by default with the new theme:

{{- with resources.Get "css/main.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

In my case, I have multiple CSS files, and I modified the code as follows:

{{- with resources.Match "css/*.css" | resources.Concat "styles.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

The only difference is in the first line. My version also seems to work, but I’m unsure if using with in conjunction with resource.Match is acceptable. Also, in order to avoid creating another with condition on line 2, I used a pipe on the first line. Is this approach okay?

2

The with is ok. Resources.Match returns a slice, which will fail if no matching resource is found.

The resulting slice is passed to concat wchich may fail eg when concatenation different content types.

If you want to errof/warnf with your own error message in either case using else a nested with would be advisable.

If you are fine with the default error message on failure or just ignore it as in your code. It’s all ok

1 Like
3

Thank you. By nested with you mean this?

{{- with resources.Match "css/*.css" }}
  {{- with . | resources.Concat "styles.css" }}
  {{- else }}
    // error message
  {{- end }}
{{- else }}
   // error message
{{- end }}
4

Yes, exactly

1 Like
5

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