Help me use SCSS processing and a background image, please

support
1

This looks great but I can’t get it to work. I’m trying to use a template variable to specify a background image for a style.

In my config.toml I have this:

[params]
header_image_file = "/header-images/header-bg.jpg"

In my style.scss (as the first line before any imports) I have this:

$headerImagePath: {{ .Site.Params.header_image_file | default "" }};

And in my baseof.html I have this:

{{ $styles := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.styel.css" . | toCSS  | fingerprint }}

 <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

When I build I get this error:

Building sites … ERROR 2018/11/03 22:14:54 error: failed to transform resource: SCSS processing failed: file "stdin", line 2, col 40: Invalid CSS after "...r-images/header-bg": expected expression (e.g. 1px, bold), was ".jpg;"

It seems to be getting tripped up by the . in front of jpg in the file name. Even if I shorten the filename, it always throws that error. I’m very new to this so I may be missing something simple, but I’m stumped right now.

Thanks for any help

2
3

Yes, this is the article that I used to try this. My post above was originally in reply to another thread where this was discussed and that thread pointed to the post you listed. My reply there was moved (by an admin?) to a new topic so it lost a little context here.

As near as I can tell, I followed the steps in that article but it is not working. I should try something simpler - like a color value as in the article - but haven’t gotten there yet.

4

I did the same and it works (I’m on macOS). So there must be some reason. Can you post a repo?

5

Mac also. I got it to work with a color value but not with a value with a dot in it.
This is my config.toml.

nav_bg = "#212529"
header_image_file = "/header-images/header-bg.jpg"

This is my style.scss

$nav-bg: {{ .Site.Params.nav_bg }} ;
$headerImagePath: {{ .Site.Params.header_image_file }};

The nav-bg works but the path value causes the error:

Building sites … ERROR 2018/11/04 20:00:01 error: failed to transform resource: SCSS processing failed: file "stdin", line 3, col 43: Invalid CSS after "...mages/header-bg": expected expression (e.g. 1px, bold), was ".jpg;"

Sure seems like the dot in the path name is confusing it.

In fact, if I just change the nav value from #212529 to #212529.junk, it fails to compile, with a similar error.

6

Can you share some code? This would be easier to troubleshoot if we could see your SCSS file.

7

I guess I thought I did that in the original post.

I have this in my config.toml

[params]
  header_image_file = "/header-images/header-bg.jpg"

In my style.scss I have these two lines that I alternately comment out to test. One has the string definition and one has the template value.

//$headerImagePath: {{ .Site.Params.header_image_file }}
//$headerImagePath: "/header-images/header-bg.jpg";

If I uncomment the second line with the “normal” definition, it works. If I uncomment the first line and comment the second, I get the error:

Building sites … ERROR 2018/11/04 20:52:42 error: failed to transform resource: SCSS processing failed: file "stdin", line 3, col 43: Invalid CSS after "...mages/header-bg": expected expression (e.g. 1px, bold), was ".jpg"

Not sure what other code to show you.

Thanks, I do appreciate the assistance.

8

If you had a git repo to share, I could clone it locally and try to reproduce the error.

In the meantime, see if using safeCSS makes a difference:

$headerImagePath: {{ .Site.Params.header_image_file | safeCSS }}

———

Edit: Something else to try, wrap it in double quotes:

$headerImagePath: “{{ .Site.Params.header_image_file | safeCSS }}”
9

not sure if a typo, but you are missing a semi colon here.

10

I had the same issue as the OP and wrapping it in double quotes fixed the issue.

11

Yup, I also had an issue, though mine was with the beautifier in Atom not recognising Hugo syntax. SCSS’s unquote function helped.

Something like:

$bp-small : unquote('{{ .Param "style.breakpoints.small" }}');

will work.