Step by step guide on how to inline your CSS using Jekyll and no extra plugins.

Move your Sass file to includes

By default your main.scss file will be in _sass/main.scss, just move that file to includes/main.scss.

Now you will be able to include that file in templates since Jekyll will look in the includes folder when calling the include function.

Remove front matter

You no longer need to have Jekyll process your Sass file so you can remove the front matter. If you want to separate you styles into different files you can keep them in the _sass directory and include them in you main.scss file.

For example your includes/main.scss file could look like the below:

@import "../_sass/reset";
@import "../_sass/base";
@import "../_sass/theme";

And if your _sass folder you will now have the following files:

_base.scss
_reset.scss
_theme.scss

Compile the Sass and include

I include the styles in includes/footer.html, with the following lines of code:

{% raw %}{% capture styles %}
{% include main.scss %}
{% endcapture %}
<style>
    {{ styles | scssify }}
</style>{% endraw %}