Template syntax (error) in SCSS files

[hugoblogger]

Is it possible to use template syntax in a scss file in my assets?

Example:

// this is _variables.scss

$bodyFontFamily: {{ .Site.Params.bodyFontFamily | default "serif" }};
/* or 
$bodyFontFamily: {{ .Site.Params.fontFamilyQuote | default "Arial" }}, sans-serif;
*/

and then use it so …

@use "variables"
 
:root {
  --body-font-family: $bodyFontFamily;
}

Using template syntax in scss files gives errors:

Invalid CSS after "...ontFamily:": expected 1 selector or at-rule, was "{{ .Site.Params.body"

[jmooring]

Initialize Sass variables from Hugo templates

Hugo v0.109.0 introduces an intuitive and convenient way to initialize Sass variables from your templates. On this page: The old way The new way Usage notes Try it The old way With v0.108.0 and earlier, you assign template values to Sass variables using the resources.ExecuteAsTemplate method. When using this approach you must place Hugo template code at the top of your root Sass file, typically assets/scss/main.scss. Depending on the complexity of your project, this approach can be: Aesth…

[hugoblogger]

Looks like the link on The old way The new way ... is not right. It points to this page.

UPDATE: Ah I see … there is a link above your message

[jmooring]

The links are correct. Try again.

[hugoblogger]

I am talking about the highlighted links

If you hover/copy the link, it points to this page.

For example, The old way points to Template syntax (error) in SCSS files - #2 by jmooring … I think it should be Initialize Sass variables from Hugo templates

Not a blocker … I am reading the other post from the link that is the title of your reply.

[jmooring]

@hugoblogger

If you hover/copy the link

Those are fragments relative to the target page.

[hugoblogger]

I have got a repo where I have applied the new way technique. I can’t seem to get it working:
https://github.com/assayire/flamingo

I have followed the steps listed in the new way except I have used libsass:

• Listed .Params.style in the config yml
• Created scss files
• Template code for inject css

Sad thing is the scss is not even transpiled

What am I missing?

[jmooring]

@hugoblogger

except I have used libsass

That’s why the tips and tricks article has different instructions depending on which transpiler you’re using. Follow the instructions… carefully.