How to minify CSS from `/static` on build-time? Also, merging CSS files together

support
1

When building the site to /public, is it possible to enforce minification of CSS files that reside in /static?

Also, a second question. Is it possible to tell Hugo to join all CSS files into one (while respecting the order in which they are loaded by <head>?

2

Put CSS files in assets folder. yourprojectname/assets
If none exists create it.

Then in your template do {{ $css := resources.Match "*.css" | resources.Concat "name.css" | minify }}
And to link it <link rel="stylesheet" href="{{ $css.Permalink }}">

3 Likes
3

Thank you, @rokh.
I had to modify it slightly to enforce loading of CSS files in a specific order:

{{ $stylea := resources.Get "css/style-a.css" }}
{{ $styleb := resources.Get "css/style-b.css" }}
{{ $stylec := resources.Get "css/style-c.css" }}
{{ $css := slice $styleb $stylec $stylea | resources.Concat "css/style.css" | minify }}
2 Likes
4

IF you want fingerprinting to reduce cache errors - add

{{ if hugo.IsProduction }} {{ $ccs  = $ccs | minify | resources.Fingerprint site.Params.digest }} {{end}}
<link type=text/css rel=stylesheet href={{ $ccs.RelPermalink }} {{ if hugo.IsProduction }}  integrity={{ $ccs.Data.Integrity }} {{end}} media="screen, print" />
3 Likes
5

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