Link Search Menu Expand Document

How to use custom css with jekyll minima theme

When providing this blog with some custom CSS to better format code examples I had troubles applying several of the online suggestions on how to add custom CSS in a Jekyll setup with Minima theme active.

Problem: Finding the right theme file to overrule

So the issue was the for the popular Jekyll theme “Minima” there were different solutions telling to modify files like

  • _includes/minima/custom.scss
  • assets/minima/styles.scss
  • assets/main.scsss

and so on. The problem is that different Minima versions did use different paths internally and when overriding the rules you need to choose the right path.

Solution: Find the right file path to overrule

The way to go is to check your generated HTML for the asset name. For example run

grep "stylesheet.*css" _site/index.html

In my case I got

<link rel="stylesheet" href="/blog/assets/main.css">

and with “/blog” being my base URL I knew I needed to supply the file assets/main.scss.

Do proper style inheritance

Now when writing assets/main.scss it is necessary to source the active theme. The best way is to do it by using templating for the theme name and not hard-coding it as in @import "minima". This way it might magically work once you decide to switch your theme:


@import "{{ site.theme }}";

Below this header you can add additional CSS rules as you like!