How to use Jekyll baseurl in css files

Question

I'm using Jekyll to host a site on Github pages. The problem lies in referencing file paths within css files.

I'd like to do something like this:

body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }

But it doesn't seem that Jekyll process the css files, so site.baseurl never gets swapped out.

There are other situations where I can't just change it to an inline style, so assume that's not a possibility.

Magnetism

Answer 1

Jekyll processes all files that have YAML front matter. Stick a front matter section (even if it's empty) at the beginning of your file, and Jekyll will transform it correctly. Try using this at the start of the file:

---
title: CSS stylesheet
---

Parsley

FWIW, you can so leave out any content and do just 2 lines ---\n--- (sorry I can't make it look right in this comment field...). – Wearable

Answer 2

Using the trick from Brian Willis' answer won't work with SASS in @import-ed files.

Instead, you can do this:

main.scss

---
---
$baseurl: "{{ site.baseurl }}";
@import "myfile";

_sass/_myfile.scss

myclass {
  background: url($baseurl + "/my/image.svg");
}

---

Don't forget

• the quotes around "{{ site.baseurl }}" (important in case of empty site.baseurl, and probably more robust) and
• the plus sign with $baseurl + "/my/image.svg".

Wingover

Same issue will pop up with SASS. Same fix except put the value of the $baseurl variable into quotes and remove the semicolon. The quotes had me messed up for a bit. – Paries

Found a relevant article about some weirdness with SASS strings. I think this answer will work perfectly without further reading. But if anyone is curious.... – Karren

I would improve the main.scss a bit, use $baseurl: "{% if site.baseurl != '/' %}{{ site.baseurl }}{% endif %}"; so you are even save when the baseurl is just a single slash. Otherwise you have // slashes in CSS-pathes – Sheave

Answer 3

The solutions proposed above didn't work for me ; main.scss cannot be processed without error if I add a front matter to it.

The solution for me was to use module configuration:

Defining a configurable variable at the very top of the main.scss file. main.scss

$baseurl= "" !default;
...

@font-face {
  font-family: 'My_font';
  src: url($baseurl + "/assets/fonts/font_file.ttf");
}

Refer to the main file and pass the value for $baseurl _sass/my_file.scss

---
---    
@use "main" with (
   $baseurl: "{{site.baseurl}}"
 );

Reference can be found on the SaSS website

Entomologize