Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
2.0.1
Toggle Menu
Eleventy 1.93s
Astro 22.90s

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).