Error: scss

Running Hugo 0.53, different errors appearing on .scss files update. Errors occur if any scss file edited

Here how I handle scss files

   {{ with resources.Get "layouts/shortcodes/s/sb-10/sb_10.scss"  | toCSS      }}
     <style >{{ .Content | safeCSS }}</style>
   {{ end }}

Console output:
panic: runtime error: invalid memory address or nil pointer dereference
[signal SIGSEGV: segmentation violation code=0x1 addr=0x30 pc=0x4960abd]*commandeer).handleEvents(0xc0001360c0, 0xc071490240, 0xc087d4ffe0, 0xc0ca010600, 0x18, 0x20, 0xc069f84e40)

Sometimes I receive the next error:

panic: no pageOutput

goroutine 16018 [running]:, 0xc0992a1bc0, 0xc0992a1b60, 0xc0a44272b0)
        /private/tmp/hugo-20181224-67428-1wm0x79/hugo-0.53/src/ +0xd24
created by*Site).renderPages
        /private/tmp/hugo-20181224-67428-1wm0x79/hugo-0.53/src/ +0x160

Couldn’t find any explanation of such behavior, any help?)

Would you try removing that pipe from the with clause ? I’m thinking this has something to do with the error.

You can preform the transformation from within the with instead.

The problem is that I usually use toCSS pipe in combination with postCSS. I couldnt find another way to preprocess scss, inline css and pipe with postcss using hugo without gulp, could you advice any?

Just tried to remove pipe

{{ with resources.Get "layouts/shortcodes/s/sb-10/sb_10.scss"   }}
<style >{{ .Content | safeCSS  }}</style>
{{ end }}

and my css didn’t load. I need toCSS pipe to process sass

I think @regis meant something like this (untested):

{{ with resources.Get "layouts/shortcodes/s/sb-10/sb_10.scss"   }}
    <style >{{ .Content | toCSS | safeCSS  }}</style>
{{ end }}

I’ve tried to do so but instead received this error
Error: Error building site: "/hugo/content/page/": failed to render shortcode "p/p-11": failed to process shortcode: "/hugo/layouts/shortcodes/s/sb-10/sb-10.html:6:22": execute of template failed: template: shortcodes/s/sb-10/sb-10.html:6:22: executing "shortcodes/s/sb-10/sb-10.html" at <toCSS>: error calling toCSS: type string not supported in Resource transformations

@bschoen yes but you cant pipe .toCSS to .Content, only to the resource, the “dot” in the with context.

The following is untested, but you get the gist.

{{ with resources.Get "layouts/shortcodes/s/sb-10/sb_10.scss"   }}
    <style >{{ (. | toCSS | safeCSS).Content  }}</style>
{{ end }}

Just tested

Error: Error building site: "/hugo/content/page/": failed to render shortcode "p/p-11": failed to process shortcode: "/hugo/layouts/shortcodes/s/sb-10/sb-10.html:6:24": execute of template failed: template: shortcodes/s/sb-10/sb-10.html:6:24: executing "shortcodes/s/sb-10/sb-10.html" at <safeCSS>: error calling safeCSS: unable to cast resource.transformedResource{commonResource:resource.commonResource{}, cache:(*resource.ResourceCache)(0xc00007c200), sourceFilename:"", linker:resource.permalinker(nil), transformation:(*scss.toCSSTransformation)(0xc0229195f0), transformInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, transformErr:error(nil), publishInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, published:false, content:"", contentInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, transformedResourceMetadata:resource.transformedResourceMetadata{Target:"", MediaTypeV:"", MetaData:map[string]interface {}{}}, Resource:(*resource.genericResource)(0xc012253340)} of type resource.transformedResource to string

Maybe there are any other possible options?

The error messages states safeCSS can’t be on a resource, so i guess (untested):

{{ with resources.Get "layouts/shortcodes/s/sb-10/sb_10.scss" }}
    <style> {{ (. | toCSS).Content | safeCSS }} </style>
{{ end }}

I didn’t catch that… Resource needs to be in assets directory. This one is not right?

It could be, but the point is the error started to occur with project growing, with 400 pages I had no problem with sass files now I’m getting an error on the finish line )))

@bschoen, I’ve tried to use code above and it worked but the error remained

Hmm, I see. I think your original code was doing exactly the same… so I guess it has nothing to do with the way you load your sass files. (But they really should be in your assets directory like @regis mentioned. I guess they already are, because resources.get retrieves the file relative to the asset directory).

I can’t make anything from the original error output, I’m afraid.

1 Like

Resources needs to live in /assets directory. The error you get suggests a bug in the error handling, but you should correct your SCSS handling as a first step.

Okey, I’m doing some project changes to make a test, it will take some time I’ll write back as soon as I check it

This is how I use it (as a partial named 'css.html):

{{ $inServerMode := .Site.IsServer }}
{{ $sass         := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . }}
{{ $sassIncludes := (slice "assets/dependencies/" "assets/scss/" "assets/scss/vendors/") }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

{{ if or ($inServerMode) (eq hugo.Environment "local") }}

    {{ $css := $sass | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $css.Permalink | absURL }}" media="screen">

{{ else }}

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

{{ end }}

I moved all files to /static/assets and this not really resolved the issue. I’ve tried to move files to assets folder(without static folder in the path ) - it didn’t work. Yesterday I noticed that rebuild of files break not only on scss file change but also on html modification. I found out that hugo tries to change .idea file, so as I work in webstorm .idea folder is always created.

I tried to work with sublime text and it worked for a while, but broke in the end. My thought was to include .idea folder with ignorefiles = [ "/.idea" ] in config.toml but it didn’t work out. I tried different regex but it looks like property "ignorefiles " doesn’t really works as expected

Now as I moved all styles to /static/ and moved all project to “project” directory on scss file change I see some unexpected for me behavior. When I change scss file I see next console output:

I guess change detection works without stop and it may be the problem because anyway it breaks at the end
with following error
panic: no pageOutput

goroutine 85514 [running]:, 0xc01d9d4960, 0xc01d9d4900, 0xc05b9e1f30)
        /private/tmp/hugo-20181224-67428-1wm0x79/hugo-0.53/src/ +0xd24
created by*Site).renderPages
        /private/tmp/hugo-20181224-67428-1wm0x79/hugo-0.53/src/ +0x160

any help?

@11110 can you share your code?

I would love to, but It’s companies project so I cant share it. Maybe there are some common mistakes or any clues that I should view ?

Create a small sample project that reproduces your issue, then share that.
That way we’re all on the same page.