Attempting to add SASS, but resource <nil>

[dsbarnes]

Hi hugo community, quite confused about some basic SCSS setup.

I am running:
Hugo Static Site Generator v0.80.0/extended darwin/amd64 BuildDate: unknown

According to the docs:

Asset files must be stored in the asset directory. This is /assets by default, but can be configured via the configuration file’s assetDir key.

I have not set up an assetDir key in config.toml, such that I can use the default path.

And so I structured my directories as such:
(NOTE: I understand that style.scss is not in the correct location, we’ll come to that in a moment)
main.scss is.

Later in the Pipes Introduction section (and in the SASS/SCSS section, but long hand):

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

I only used the ToCSS pipe which produces these errors:

execute of template failed: template: index.html:9:59: executing "index.html" at <resources.ToCSS>: error calling ToCSS: type <nil> not supported in Resource transformations

I also attempted to use the includes path taking into account that

Paths must be relative to the project

like this:

<!-- Custom stylesheets-->
    {{ $options := (dict "includePaths" (slice "/css/style.scss")) }}
    {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">

This results in a different error:

error calling ToCSS: no Resource provided in transformation

Not sure why there was no provided resource, or how exactly that’s different from a <nil> resource?
I added .Site.BaseURL to the path above, same error.

Sorry if I’m missing something dead obvious, but what have I done incorrectly in setting up the SCSS?

Thanks all.

[davidsneighbour]

@dsbarnes

resources.Get "sass/main.scss"

This asks hugo to look for the file in assets/sass/main.scss.

Asset files must be stored in the asset directory. This is /assets by default, but can be configured via the configuration file’s assetDir key.

You wrote, that you get to the “I don’t have an assets directory part” later, but I don’t have the feeling, that you did that. It’s as simple as that: Put your file into assets, load it with resources.Get "filenameInsideOfAssets".

The error comes up at postCSS because what it get’s is NIL (nothing). Resources.Get does not throw an error because it might be that this is wanted.

{{ $options := (dict “includePaths” (slice “/css/style.scss”)) }}

I think (did not test it) that you go better without the / in /css/style.scss if it’s relative. The “relative to the project” means, that the path to your repo is assumed, like /home/username/myproject/ before the actual file in your repository, eg. css/style.scss.

[dsbarnes]

I have no idea why I thought my resources/ dir was called assets/
Thank you for catching that, it worked immediately.