Include CSS file inline rather than as a link

Question

I use a pre-processor to generate my CSS. I would like to include the resulting file inline, rather than as a link. Is there a way of doing this via the twig tags in Craft?

I know I could move the CSS file to the templates folder, so that I could use the include function, but is that the only and/or preferred method of achieving what I want to do? Or am I just best moving the inlining into my pre-processing? Thanks!

Answer 1

To simple insert raw CSS into a template from a file, you'll want to use Twig's source function. So:

<style>{{ source('file.css') }}</style>

For that file to be located somewhere outside of the templates folder, you'll have two options.

1. Create a symlink to the file or its folder in the templates folder. Twig will be none the wiser.

2. Add a Path to the existing template loader in Craft. This will require a custom plugin, and some digging to see how the loader is referenced in Craft. But in the end, your command will look something like this:

   $loader->addPath('path/to/other/files');

The really cool part is that paths can have namespaces in Twig. You can do this:

$loader->addPath('path/to/public', 'public');

And that let's you do this in your templates:

{{ source('@public/css/site.css') }}

Answer 2

An alternative to the source function is using my Inlin plugin. It lets you inline files from wherever you want; the document root is the base folder, but .. works just fine.