Is it possible to pass a value from Craft global setting into a CSS/SCSS file? So for example I want to be able to allow the end user to customise colours and fonts without having to include it inline.

Has anyone achieved this or similar?

Many thanks


It’s possible to do this by making the entire CSS file a Twig template.

Create a new file in your templates folder, such as templates/css/styles.css, with all the dynamic styles you want.

To prevent the browser from reloading the file on each request, make sure you set cache headers in the template.

{# Tell the browser to cache this page for 30 days #}
{% set expiry = now|date_modify('+30 days') %}

{% header "Cache-Control: max-age=" ~ (expiry.timestamp - now.timestamp) %}
{% header "Pragma: cache" %}
{% header "Expires: " ~ expiry|date('D, d M Y H:i:s', 'GMT') ~ " GMT" %}

Then load the CSS file just like any other from your webpage templates.

<link rel="stylesheet" type="text/css" href="/css/styles.css">
  • Thats awesome thank you! I'm guessing you could adapt to possibly handle scss?
    – Chrisl2310
    Mar 8 '20 at 15:31
  • @Chrisl2310 not natively but maybe possible with this plugin: plugins.craftcms.com/scss Mar 8 '20 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.