The Trevor Project — Saving Young LGBTQ Lives
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Compare ×4000 file build
Eleventy 1.93s
Astro 22.90s

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 Jump to heading

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 Jump to heading

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.

Warning about Content Security Policy Jump to heading

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.