Minifying a bundled CSS resource ignores one of the bundled files

Hello,

I’m having some difficultly bundling and minifying CSS assets.

Desired result (akin to Can't Bundle & Minify JS Assets):

  • CSS reset file & CSS raw screen file are bundled together
  • That combo file/variable is then minified
  • The resulting file’s Permalink is put into the <style> tag

Current result:

  • CSS reset & CSS raw screen file are correctly bundling together (permalinking to this variable returns correct CSS)
  • Running the minified function creates a CSS file that does not include the reset file’s characters at the start (at least locally)

Here is the current code:
{{ $reset := resources.Get “css/reset.css” }}
{{ $raw := resources.Get “css/screen.css” }}
{{ $screenCombined := slice $reset $raw | resources.Concat “css/screen.css” }}
{{ $screen := $screenCombined | minify }}

However for some reason, adding a ‘minify’ to line 3 does keep $reset included in the output:
{{ $reset := resources.Get “css/reset.css” }}
{{ $raw := resources.Get “css/screen.css” }}
{{ $screenCombined := slice $reset $raw | resources.Concat “css/screen.css” | minify }}
{{ $screen := $screenCombined | minify }}

but this gives a permalink of /css/screen.min.min.css, which I guess is one more min than you need.

Is there any reason why the files aren’t combining correctly with only one use of ‘minify’?

I thought it might be an issue with the Resources folder caching previous file versions while I’ve been messing around and changing file names, so I’ve attached a screenshot of my Resources folder too. Should I be clearing this cache manually? It has ‘style’ file which isn’t used, and what seems like too many ‘screens’?

Many thanks.

Why not just do it all in one line like you mentioned?

{{ $screenCombined := slice $reset $raw | resources.Concat “css/screen.css” | minify }}
<!-- $screenCombined.Permalink, etc, etc -->

Yes that does seem to work, thank you. Not sure why it was failing when it was separated out though?

Should I be clearing the resources cache folder manually too?

It’s not necessary. Also keep in mind you can pass the --gc flag if desired

Thanks - I ran hugo --gc but it hasn’t touched the excess stylesheets in the resources folder. I guess I’l just leave it.