Quick Tip: Super Simple CSS Concatenation

In some situations you may want to concatenate content files together into a single top level template. Maybe you want to create a single CSS file with all of your component CSS inside.

Consider this sample theme.njk file:

---
permalink: theme.css
---

{% include "components/header.css" %}
{% include "components/footer.css" %}

That’s an easy way to concatenate files and control the include order.

You might imagine creating an include-all Shortcode that uses fast-glob to include a glob of files like {% include-all "components/*.css %}, but that’s an exercise left to the reader!

Capture and Minify

In our Inline CSS Quick Tip, we discussed how to capture and minify a CSS file. This approach can be modified, of course, to capture multiple includes too!

<!-- capture the CSS content as a Nunjucks variable -->
{% set css %}
{% include "components/header.css" %}
{% include "components/footer.css" %}
{% endset %}
<!-- feed it through our cssmin filter to minify -->
<style>
	{{ css | cssmin | safe }}
</style>

Warning about Content Security Policy

WARNING:

If you are using a Content Security Policy on your website, make sure the style-src directive allows 'unsafe-inline'. Otherwise, your inline CSS will not load.

Work with what you have

Of course, Eleventy has no desire to replace your existing build pipeline. This is just a super simple example if you want something up and running quickly.

That said, Eleventy wants to work with what you have. As an example, the EleventyOne project scaffold is a fine example of using Eleventy with Gulp and Sass. At time of writing, the zachleat.com source code is an older example that works with Grunt and Sass (not anymore though).

Quick Tip: Super Simple CSS Concatenation

Capture and Minify

Warning about Content Security Policy

Work with what you have

All Quick Tips