The theme I’m using uses a Partial to make use of Site.Params to set the colours in CSS variables.
Although this does work fine, I’m not really fan of this cluttering of my site’s <head>.
I would like to figure out how I can combine the transpiled SCSS>CSS in the same bundle as the rest of the CSS.
My current setup results in the error: execute of template failed: template: partials/head/stylesheets.html:24:37: executing "partials/head/stylesheets.html" at <resources.Concat>: error calling Concat: expected slice of Resource objects, received []interface {} instead
Other attempts resulted in the following error: error calling toCSS: runtime error: invalid memory address or nil pointer
{{ with resources.Get "sass/main.scss" }}
{{ $opts := dict
"transpiler" "dartsass"
}}
{{ with . | toCSS $opts }}
{{ with slice . | append (resources.Match "css/*") | resources.Concat "css/styles.css" }}
{{ if hugo.IsProduction }}
{{ with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ else }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
{{ end }}
{{ end }}
{{ end }}
Notes:
If you can prefix the CSS file names as shown in the file structure above, they’ll be appended in numerical order. That makes it really easy to append all of the CSS files, in the desired order, with the resources.Match function
There’s no need set the target path in the transpiler options map. The target path is defined in the call to resources.Concat.
Took a while before I had the spare time to give this another go.
Looks like the CSS isn’t being built.
My staging version currently has no CSS at all anymore.
Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
Sharing my own site’s project is a bit harder.
My main project is a private repo and I have a main and staging branch that then have a build workflow using peaceiris/actions-gh-pages to push the generated site to different repos (1 for prod and 1 for staging), each with their own CNAME.
I’m currently trying to figure out why running hugo server (via the hugomods/hugo:exts podman container) gives me a less broken site than the Github build currently does…
Will update this post when I figure out what’s going wrong.
Seems like caching might have to do something with this…
I assume GitHub’s hashFiles may work differently with submodules. But I’m too much of a Git(Hub) novice to be sure.
Removed the GitHub Action cache and triggered the build workflow again. Now the site does seem to be OK lay-out wise. The dark/light mode switching does appear to be broken now.
Looks like the variables weren’t correctly replaced.
This is (part of) the content of the bundled CSS
I think I may have figured it out.
I believe the DartCSS compiler doesn’t like working with CSS variables.
Made a small changes to /assets/scss/_vars.scss, using one of the Sass variable for the background colour directly in background-color instead of first setting var(--bkg-color).
Sadly, this doesn’t bring me much closer to a fix, unless I replace all var() in the different stylesheets with references to the Sass variables (and migrate the CSS files to SCSS).
