11tyThe possum is Eleventy’s mascot

Eleventy Documentation

Documentation Menu

Quick Tip #005—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>

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. The zachleat.com source code is an older example that works with Grunt and Sass.