Unable to process SCSS file in Hugo 0.58.3

support
1

Hi,

I am having a problem using SCSS with hugo. My assets folder has 1 scss which imports 2 more scss.
Inside my hugo head.html file I have

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

However, when I run hugo I get:

execute of template failed: template: partials/head.html:26:56: executing "partials/head.html" at <resources.ToCSS>: error calling ToCSS: type <nil> not supported in Resource transformations

I tried to google around and I’ve found many posts regarding an issue with node_modules which apparently were common in previous versions. Nothing for the newest one. My hugo environment is:

Hugo Static Site Generator v0.58.3/extended darwin/amd64 BuildDate: unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.13"

SCSS files works if I compile them with scss command. File themes/mytheme/assets/sass/main.scss exists.

How can I debug/solve this issue?

thanks
LM

2

Hi,

It’s difficult to say what’s wrong because it should work, so we will need more details to be able to help you. As per Requesting Help, it would be easier to help you if you have your code somewhere we can have a look at.

3

I found the same and after some testing around this one worked for me:

{{ $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 }}">

Note that there is no resources.ToCSS in there. The resources part seems to be what changed. (working with 0.58.3)

4

@davidsneighbour I am on 0.58.3 as well but it generates an error

<toCSS $cssOpts>: error calling toCSS: type map[string]interface {} not supported in Resource transformations

I checked the syntax and it’s correct, I have literally copied your lines and replaced the name of the scss file.

5

do you have a node_modules directory in the rootdirectory? I omitted that one from the instructions. You can have a look at the hugonewsletter repo to see it in action and working:

  • clone it
  • run npm install
  • run hugo server

in assets/scss i have the theme and the stylesheet from above is the one used here.

Maybe something small was missing from my notes…

6

I just grabbed the package.json and went from there. I still get the same error. Based on the error, it seems an issue not with node, but with toCSS function.
You mentioned resources.ToCSS seems to have changed, where did you get this info? I am reading the changelog and cannot find any mention. The manual regarding HugoPipe doesn’t say anything interesting, the section seems to be not fully developed compared to others.