Documentation Pages
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.