Minifying a bundled CSS resource ignores one of the bundled files


#1

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.


#2

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 -->

#3

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?


#4

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


#5

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