Template syntax (error) in SCSS files

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


// 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"

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 :+1:

The links are correct. Try again.

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. :pray:

Those are fragments relative to the target page.

I have got a repo where I have applied the new way technique. I can’t seem to get it working:

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 :tired_face:

What am I missing? :pray:

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