How to fix resources.Get unable to read scss path?

[jesvtb]

I am trying to set up a custom scss sheet per post. I can retrieve the variable but resources.Get could not read the formatted string as scss for conversion.

This is how I set up my frontmatter:

---
title: Title
description: some description
languageCode: en
slug: FT000
customCss: FT000.scss
---

baseof.html

{{ $customCssPath := printf "css/blog/%s" .Params.customCss }}
{{ $customCss := resources.Get $customCssPath | toCSS | minify | fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $customCss.RelPermalink }}" integrity="{{ $customCss.Data.Integrity }}" />

The above would not work. However, reading resources.Get "css/blog/FT000.scss" would though. Css file is located in assets folder.

How should I fix this?

[irkode]

Would be good to know what that means.

@jesvtb

The above would not work

An error message
No output
Unexpected output
…

And also your setup:
hugo env

[chrillek]

@jesvtb

a custom scss sheet per post.

Why? You’re a creating a maintenance nightmare. And why would you need another stylesheet for every post?

[jesvtb]

Trying to create a interactive storytelling blog. Each post get specified css for the graphic needs.

[jesvtb]

It returned an error message: “ not supported in Resource transformations”

[jesvtb]

hugo env returned the following:

hugo v0.127.0+extended darwin/arm64 BuildDate=2024-06-05T10:27:59Z VendorInfo=brew
GOOS="darwin"
GOARCH="arm64"
GOVERSION="go1.22.4"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="2.7.1"
github.com/sass/dart-sass/compiler="1.77.6"
github.com/sass/dart-sass/implementation="1.77.6"

[irkode]

You do not specify which transpile engin you want to use. So hugo uses the default libsass, which does not support all sccs features.

As an estimated guess I would think you need to switch to dart-sass. You at least installed it for a reason.

See usage - options - transpiler in

ToCSS

[jesvtb]

Yes I am using dart-sass.

I have another global scss stylesheet which works.

{{ $css := resources.Get "index.scss" | toCSS | minify | fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" />

It is the one I posted that failed to retrieve the strings from {{ $customCssPath := printf "css/blog/%s" .Params.customCss }}

[irkode]

mmh, maybe I just got your problem wrong - do you say {{ $customCssPath := printf "css/blog/%s" .Params.customCss }} fails?

If so there must be something strange in your source . For that we would need to see the code. a stripped down non-working example in a repo would be fine.

@jesvtb

Yes I am using dart-sass

I would say NO, you are not. Just installing dart-sass is not enough. that’s why I posted the link to the documentation.

transpiler
(string) The transpiler to use, either libsass (default) or dartsass. Hugo’s extended edition includes the LibSass transpiler. To use the Dart Sass transpiler, see the installation instructions below.

[davidsneighbour]

@irkode

{{ $customCssPath := printf "css/blog/%s" .Params.customCss }}

Blackbox idea here: ALL scss generation fails if ONE content file does not have .Params.customCss. The way this line is written Hugo expects all frontmatters to have this variable. Better would be:

{{ with .Params.customCss }}
  {{ $customCssPath := printf "css/blog/%s" . }}
  ... do your stylesheet generation and link here
{{ end }}

Also: is .Params at that point really what we expect it to be or is the Dot taken by another range or in a partial?

[jesvtb]

@davidsneighbour

{{ with .Params.customCss }}
  {{ $customCssPath := printf "css/blog/%s" . }}
  ... do your stylesheet generation and link here
{{ end }}

This solved it! Thanks.

[jesvtb]

Thanks for the suggestions. I followed up and added the config options.