Glob directory and minify all to css

support
1

Hey all!

Currently I ship all my css in one file. I do this by injecting this into my head tag:

{{ with resources.Get "css/app.css" | minify }}
    <style>{{ .Content | safeCSS }}</style>
{{ end }}

The webpage I’m currently working on should NOT have all of the css - so I’m forking everything into subdirectories.

css/game/globals.css
css/game/login.css
css/game/controller.css
...

css/privacy_policy/terms.css

My question is:

Will I need to iterate all of the files I wish to include on each page manually? This isn’t a huge deal but seems rather ugly.

Could I instead do a “for each glob(css/game/*)” and then execute that code chunk as it is with each path?

If yes how would I go about doing that with hugo?

Thanks in advance

2

Have a look at how SASS/SCSS works (using @import to import partial files). Then learn that Hugo has “pipes” for everything else (minification, post-processing, fingerprinting)

Example:

assets/scss/theme.scss:

@import "bla"; // imports assets/scss/_bla.scss
@import "fasel"; // imports assets/scss/_fasel.scss

and then add your own system with multiple stylesheets. Name them with an UNDERSCORE. Then import in your theme style.

Then in layouts/partials/stylesheet.html:

{{ $sass         := resources.Get "scss/theme.scss" }}
{{ $sassIncludes := (slice "node_modules/") }}
{{ $cssTarget    := "theme.css" }}
{{ $cssOpts      := (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes "outputStyle" "compressed") }}

{{ $css := $sass | toCSS $cssOpts | resources.PostCSS | fingerprint }}
<link rel="stylesheet" href="{{ $css.Permalink | absURL }}" integrity="{{ $css.Data.Integrity }}">

Looks more complicated than it is.

Read on:

and more in that section.

2 Likes
3

Thanks for the guidance - I was approaching this from the wrong angle :slight_smile: