Combining CSS files into one file

support
1

Hello. I have two CSS files: header.css and footer.css. It is very useful to have two files to develop. But for Google, it will be fine if Hugo combines two files into one. Can Hugo do it?

1 Like
2

Yes it can. Place the CSS files inside the assets folder and use Hugo pipes to process them. One of the available functions is “concat”.

1 Like
3

This is the method, @frjo is talking of:

{{- $CSS := slice (resources.Get "css/fonts.css") (resources.Get "css/default.css") | resources.Concat "assets/css/main.css" | minify | fingerprint }}

<link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="all">

As of Hugo 0.57 you can also use wildcards:

{{ $CSS := .Resources.GetMatch "css/**.css" | resources.Concat "main.css" }}

<link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="all">

**.css means all CSS files—even if in subfolders.

*.css means all CSS files.

3 Likes
4

You want to use .Resources.Match to get multiple matches.

Note that the above has “always” been possible. The new thing in Hugo 0.57 was:

{{ $CSS := resources.Match "css/**.css" | resources.Concat "main.css" }}

The above will search in /assets.

2 Likes
5

Hello. Help me, please.
I got CSS files FROM .md file like parameters. Next, I split the string into an array and now I should combine these CSS files into one global file. How can I do that? I know a contracture
{{- $CSS := slice (resources.Get "css/fonts.css") (resources.Get "css/default.css") | resources.Concat "assets/css/main.css" | minify | fingerprint }}
but how can I apply it into my cases?

My code is:

{{ if isset .Params "custom_css" }}
{{ $temp_css:= index .Params "custom_css" }}
{{ $css:= split $temp_css "," }}
{{ range $el := $css }}
	{{ $custom_css := delimit (slice "css/custom/" $el) "" }}
	{{ $style := resources.Get $custom_css | resources.Minify | resources.Fingerprint }}
	<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="all">
{{ end }}
{{ end }}
6

Hello, maybe someone have a solution?

7

I think it’s better you create a new thread instead of continuing a very old one.

8

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