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!
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
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.
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).
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。