Serving CSS files from template folder

Question

Is there a way to serve my CSS files from the templates folder? I am wanting to be able to use TWIG tags, etc to build some of this. And even if the TWIG tag idea does not work out, I would prefer this sort of an organizational structure.

Answer 1

You can, just by naming the file with a .css extension, and then accessing it just like any other template in there. For example, you could have the file craft/templates/styles/styles.css, and that would be accessible from http://example.com/styles/styles.css. Craft will even serve it with a text/css Content-Type header.

However, this is only a good idea in certain situations. Directly loading your CSS by pointing the URL to a publicly-accessible file that Apache can serve without PHP/Craft’s help is going to be much less work for your server (serving static files is what Apache does best). Also, browsers won’t be able to cache those dynamic CSS requests (unless you manually override the cache headers from your template using the {% header %} tag, but then, there would be no point in having it dynamically generated in the first place). So this will have some impact on your overall page load times.

You’d probably be better off just generating your CSS styles that have to be dynamic right in the main HTML templates within <style> tags, or using the {% includeCss %} tag.