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

<pre><code>&lt;style&gt;{{ source('file.css') }}&lt;/style&gt;
</code></pre>

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

<ol>
<li>Create a symlink to the file or its folder in the templates folder. Twig will be none the wiser.</li>
<li><p>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:</p>

<p>$loader->addPath('path/to/other/files');</p></li>
</ol>

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

<pre><code>$loader-&gt;addPath('path/to/public', 'public');
</code></pre>

<p>And that let's you do this in your templates:</p>

<pre><code>{{ source('@public/css/site.css') }}
</code></pre>

CC BY-SA 3.0
2015-11-10T10:54:54.097Z
This requires the CSS files to be kept in the template folder, is that the best place to put them as they're not templates.
frontendbeast
CC BY-SA 3.0
2015-11-10T12:35:42.673Z
Well, Twig's File Loader rejects paths with `..`, but you could get around that with a symbolic link, a custom Loader, or by adding a path to the template Loader. The second two requires a plugin.
Bryan Redeagle
CC BY-SA 3.0
2015-11-10T13:12:23.457Z
I updated the question to include more info on getting files to show up in templates.
Bryan Redeagle
CC BY-SA 3.0
2015-11-09T12:51:00.123Z
2015-11-10T13:12:04.107Z
2015-11-10T13:12:04.107Z
Bryan Redeagle
<p>An alternative to the <code>source</code> function is using <a href="https://github.com/aelvan/Inlin-Craft" rel="noreferrer">my Inlin plugin</a>. It lets you inline files from wherever you want; the document root is the base folder, but <code>..</code> works just fine.</p>

CC BY-SA 3.0
2016-08-14T18:38:10.930Z
2016-08-14T18:38:10.930Z
André Elvan
<p>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?</p>

<p>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!</p>

<templating>
Include CSS file inline rather than as a link
# Include CSS file inline rather than as a link

(Asked by: username_0 on 2015-11-09)

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!

**Tags:** templating


---

## 2 answers

### Answer by username_1 on 2015-11-09. Score: 11

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


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

Create a symlink to the file or its folder in the templates folder. Twig will be none the wiser.
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') }}

> **Comments:**
> **username_0**: This requires the CSS files to be kept in the template folder, is that the best place to put them as they're not templates.  
> **username_1**: Well, Twig's File Loader rejects paths with `..`, but you could get around that with a symbolic link, a custom Loader, or by adding a path to the template Loader. The second two requires a plugin.  
> **username_1**: I updated the question to include more info on getting files to show up in templates.  

---

### Answer by username_2 on 2016-08-14. Score: 5

An alternative to the `source` function is using [my Inlin plugin](https://github.com/aelvan/Inlin-Craft). It lets you inline files from wherever you want; the document root is the base folder, but `..` works just fine.


---

