# CSS Bundle

**URL:** <https://discourse.gohugo.io/t/css-bundle/18630>\
**Category:** support\
**Created:** [May 10, 2019, 11:10am UTC](https://discourse.gohugo.io/t/css-bundle/18630 "2019-05-10T11:10:02Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 11:10am UTC](https://discourse.gohugo.io/t/css-bundle/18630/1 "2019-05-10T11:10:02Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [May 10, 2019, 11:21am UTC](https://discourse.gohugo.io/t/css-bundle/18630/2 "2019-05-10T11:21:37Z")

</div>

> [@Polarhardboiled](#):
>
> What should be the correct syntax ?

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

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

```

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 11:36am UTC](https://discourse.gohugo.io/t/css-bundle/18630/3 "2019-05-10T11:36:33Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [May 10, 2019, 11:49am UTC](https://discourse.gohugo.io/t/css-bundle/18630/4 "2019-05-10T11:49:19Z")

</div>

> [@Polarhardboiled](#):
>
> executing “partials/styles.html” at \<resources.Concat\>: error calling Concat: slice not supported in concat

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:

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

```

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 11:59am UTC](https://discourse.gohugo.io/t/css-bundle/18630/5 "2019-05-10T11:59:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [May 10, 2019, 12:41pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/6 "2019-05-10T12:41:26Z")

</div>

> [@bep](#):
>
> .Resources.GetMatch

this is a page relates function!

use assets:

> **[Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/#asset-directory)**
>
> Hugo Pipes is Hugo's asset processing set of functions.

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

> **[Concat](https://gohugo.io/hugo-pipes/bundling/)**
>
> Bundle any number of assets into one resource.

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 1:03pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/7 "2019-05-10T13:03:26Z")

</div>

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](https://gohugo.io/hugo-pipes/bundling/), I understood that it is not possible as this function is dedicated to the Page or Leaf bundles.  
Am I correct ?

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [May 10, 2019, 1:08pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/8 "2019-05-10T13:08:37Z")

</div>

correct, 100 points 😉

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [May 10, 2019, 2:30pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/9 "2019-05-10T14:30:22Z")

</div>

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

```nohighlight
{{ $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 }}">

```

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 3:50pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/10 "2019-05-10T15:50:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [May 10, 2019, 3:52pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/11 "2019-05-10T15:52:09Z")

</div>

> [@Polarhardboiled](#):
>
> Not at the theme directory as initially done.

What does this mean?

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 4:14pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/12 "2019-05-10T16:14:23Z")

</div>

Initially the assets/css directory is as follows:

```auto
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.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [May 10, 2019, 4:20pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/13 "2019-05-10T16:20:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Polarhardboiled](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/polarhardboiled/32/22623_2.png) [@Polarhardboiled](https://discourse.gohugo.io/u/Polarhardboiled)\
**Post date:** [May 10, 2019, 4:37pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/14 "2019-05-10T16:37:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [May 10, 2019, 4:45pm UTC](https://discourse.gohugo.io/t/css-bundle/18630/15 "2019-05-10T16:45:46Z")

</div>

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.