CSS not rendering Liquid properly


I’ve been trying to use a YAML files in order to allow easy customization for the sites colors/fonts/etc. When creating custom headings and such, I want to use Liquid to specify the color for different classes. However, when the site loads, the liquid does not change to the CSS. The CSS works as expected if I change the #{{ site.data.template.color.primary }} to a normal hex color such as #323232. I do not know if it is an issue with the interpretation order, as I could not find why it would conflict from the jekyll website, but if i’m wrong, please point me out.


Jekyll does not process Liquid in Sass partials out-of-the-box. You’ll have to predefine Sass variables in your loader file (usually assets/css/styles.scss) and then use those Sass variables in your partials.

Alternatively, you may want to checkout third-party plugins such as jekyll-assets


I fixed the issue by adding
empty YAML to the top of the CSS file. I wanted to post this so if anyone is browsing the forums for the same issue as me, they can view my solution.