CSS Bundle

support
1

I have a partial for css styling as follows:

{{ $variables := resources.Get "css/variables.css" | fingerprint }}
{{ $fonts := resources.Get "css/fonts.css" | fingerprint }}
{{ $layout := resources.Get "css/layout.css" | fingerprint }}
{{ $menu := resources.Get "css/menu.css" | fingerprint }}
{{ $gallery := resources.Get "css/gallery.css" | fingerprint }}
{{ $custom := resources.Get "css/custom.css" | fingerprint }}
{{ $styles := slice $variables $fonts $layout $menu $gallery $custom | resources.Concat "styles.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}"></link>

This partial is working well but I would like to replace the list of css by implementing bundle css with {{ range }} and Concat functions if possible.
All css files are located in theme directory assets/css.

What should be the correct syntax ?

2

I’m taking this from memory, but I don’t think you need to range. Try something like this:

{{ $mycssbundle := .Resources.GetMatch "**.css" | resources.Concat "mybundle.css" }}
3

I tried it as follows:

{{ $mycssbundle := .Resources.GetMatch "css/**.css" | resources.Concat "mybundle.css" }}
<link rel="stylesheet" href="{{ $mycssbundle.Permalink }}"></link>

but I got the following error:

executing "partials/styles.html" at <resources.Concat>: error calling Concat: slice <nil> not supported in concat

4

I guess that means that .Resources.GetMatch “css/**.css” did not match anything. We should consider improving the error handling here, but you can start by doing something ala this:

{{ $mycssbundle := .Resources.GetMatch "css/**.css" }}
{{ if  $mycssbundle }}
{{  $mycssbundle =  $mycssbundle | resources.Concat "mybundle.css" }}
{{ else }}
{{ errorf "Bundled CSS not found" }}
{{ end }}
5

Thanks for your support.
But I still got the error message ERROR 2019/05/10 13:54:16 Bundled CSS not found
I don’t understand why as I actually get 4 css files in assets/css directory.

6

this is a page relates function!

use assets:

move the CSS files to /assets/css
and use asset bundles

7

Thanks for the explanation,
But it’s what I did (see my first post) and it works well.
What I am trying to do is to avoid typing all css files and let Hugo do the job through the resources.Get "css/**.css" function.
With your explanation and the Hugo docs, I understood that it is not possible as this function is dedicated to the Page or Leaf bundles.
Am I correct ?

8

correct, 100 points :wink:

9

@Polarhardboiled try this, which assumes your CSS lives at assets/css

{{ $cssResources := slice }}
{{ $dir := readDir "assets/css" }}
{{ range $dir }}
  {{ $path := print "css/" .Name }}
  {{ $resource := resources.Get $path }}
  {{ $cssResources = $cssResources | append $resource }}
{{ end }}
{{ $cssBundle := $cssResources | resources.Concat "css/bundle.css" | fingerprint | minify }}
<link rel="stylesheet" href="{{ $cssBundle.RelPermalink }}">
10

It works !!
But only with the css files located in the assets/css at root directory of the site. Not at the theme directory as initially done.
In addition, the fonts location (or URL) has been lost (implemented in a separate fonts.css (same location)
I guess it’s something related to the absolute or relative path, but I am not skilled at all to investigate further.
Thank you.

11

What does this mean?

12

Initially the assets/css directory is as follows:

content
resources
themes
    └──basic
       └── archetypes
       └── assets 
          └── css
             └── style1.css
             └── style2.css
             └── style3.css 
          └── js
       └── layouts
       └── static
             └── fonts

If I maintain the same structure (assets at the theme directory) the partial doesn’t work. If I move the assets/css at the upper level, meaning at the site root, it works.

13

Ah I see. This is because the code snippet above is reading CSS files from dir assets/css. You could change that to themes/basic/assets/css if you wanted.

14

Thanks, That’s it.
I would expect the path not hard-coded for the specific theme but rather something relevant for any theme.
However it works.

15

The above is a minimal working example. But can obviously be made smarter.
For example one could make it walk each dir under themes then add all of the found CSS files to a big slice.