Eleventy: Use Liquid tags/variables in external CSS & JS files

[zac-heisey]

Curious to know if there is a way to pass in Liquid tags or variables to external CSS and JS files. This is possible in Jekyll by adding an empty Yaml front matter block to any CSS or JS file like so:

---

body {
  background-color: {{ settings.colors.body_background }}
}

or

---

function sayHello() {
  body.innerText = 'Hello There! My name is {{ site.author }}.';
}

It seems you can pass in data via Liquid tags if you use inline CSS or JS in Eleventy, but wondering if it's possible to do so in external files.

Thanks in advance for any insights here!

[scottishstoater]

@zac-heisey Yeah sure you can, just add .liquid to the end and add an output permalink.

Example: src/assets/app.css.liquid

---
background: red
permalink: /assets/app.css
---

body {
    background: {{ background }} // local file data;
    color: {{ site.title }} // global data file from src/_data/site.js; 
}

Just make sure you have liquid in templateFormats in your .eleventy.js.

return {
  templateFormats: ["html", "md", "liquid"],
};

Just bare in mind this could add some conflicts if you are handling your assets with PostCSS, SCSS etc.

[zac-heisey]

@chrisssycollins Perfect! This is exactly what I was looking for - thank you so much for taking the time to help me out! I knew it was likely possible, I just couldn't get the syntax right :)

[scottishstoater]

@zac-heisey No problem 😃