Errors with SCSS concat/toCSS, writing resource file to the page

support
1

Trying to concat sass partials, toCSS-ify them, and then write the result to the page. This is in a private repo for work.

Here is what I have in the partial, which works fine:

{{- $scssVars := resources.Get "scss/abstracts/_variables.scss" -}}
{{- $scssMixins := resources.Get "scss/abstracts/_mixins.scss" -}}
{{- $scssFunctions := resources.Get "scss/abstracts/_functions.scss" -}}
{{- $scssPartial := resources.Get ( index (split .Params.scssfile "assets/") 1) -}}
{{- $scssTitle := add (.Title | urlize) "-component.scss" -}}
{{- $scssConcat := slice $scssVars $scssMixins $scssFunctions $scssPartial | resources.Concat $scssTitle -}}
{{- $scssRendered := $scssConcat | toCSS -}}

If I use {{<pre><code>{{$scssRendered}}</code></pre>, I get the following:

{0xc42001f650  <nil> 0xc4209b2680 {{0 0} 0} <nil>  {{0 0} 0} {  map[]} Resource(css: css/tiles-component.css)}

Setting {{- $cssPartial := $scssRendered.Resource -}} and then using `{{- $cssPartial -}} inside a code block gives me:

Resource(css: css/tiles-component.css)

None of the following have worked.

X - {{- $cssPartial := resources.Get $scssRendered -}}
X - {{- $cssPartial := resources.Get $scssRendered.css -}}
X - {{- $cssPartial := $scssRendered.get $scssTitle -}}
X - {{- $cssPartial := $scssRendered.Resource.Get "css" -}}
X - {{- $cssPartial := $scssRendered | resources.Get "css" -}}

Maybe this isn’t possible?

Any help would be greatly appreciated!

2

You need to do

<pre><code>{{$scssRendered.Content | safeHTML }}</code></pre>

Not sure about the safeHTML … but will not hurt.

1 Like
3

Thank you very much for the quick response/support, @bep.

Getting closer, but still not there. The following doesn’t write anything to the page:

<pre><code>{{$scssRendered.Content | safeHTML }}</code></pre>

However, if I do…

...previous vars from above...
{{- $scssRendered := $scssConcat | toCSS -}}
{{- $cssPartial := $scssRendered.Resource -}}

And then do

<pre><code>{{- $cssPartial.Content -}}</code></pre>

I get the full concatenated .scss file, including all the mixins, etc and not the (much smaller) sass-ified CSS result.

4

Got it!

If I pass $scssRendered through | postCSS (forgot that above), I get the desired result. So, here is the final, and thank you again @bep! I would have scratched my head for another few hours if you didn’t point me towards .Content!

{{- $scssVars := resources.Get "scss/abstracts/_variables.scss" -}}
{{- $scssMixins := resources.Get "scss/abstracts/_mixins.scss" -}}
{{- $scssFunctions := resources.Get "scss/abstracts/_functions.scss" -}}
{{- $scssPartial := resources.Get ( index (split .Params.scssfile "assets/") 1) -}}
{{- $scssTitle := add "/css/single-components/" (add (.Title | urlize) ".css") -}}
{{- $scssConcat := slice $scssVars $scssMixins $scssFunctions $scssPartial | resources.Concat $scssTitle -}}
{{- $scssRendered := $scssConcat | toCSS | postCSS -}}
<pre><code>{{- $scssRendered.Content -}}</code></pre>

Now I just need to figure out how to scrub the line with the sourcemap at the bottom of the file, but I’m guessing that has to do with the fact that I don’t have a postcss.config for the project. I love the versatility of the new Hugo Pipes!