Can Ghost process handlebars in CSS files?

Developer help
1

I am attempting to add something like…

(assets/css/site.css)

@theme {
–-color-site-500: {{@site.accent_color}};
}

…into a css file. However Ghost does not appear to process the handlebars.

Does anyone know if there Is a way to configure Ghost to process handlebars contained in css files?

When I view this file in the browser - the source is exactly as written above - the handlebars has not been processed.

2

There’s no handlebars processing of anything in assets, nor anything without .hbs, AFAIK.

Ghost sets –ghost-accent-color in ghost_head, so you can just use that without further fuss, probably :slight_smile:

But in general if you need to write css with handlebars, you’d need to put that css between style tags in a .hbs file.

(Lots of themes inline critical css by creating and including a partial that contains that hbs in their default.hbs file.)

3

Hello @Cathy_Sarisky,

Thank you for replying. I did think that would be the case.

I was hoping to be able to inject the site theme colours into tailwind css without manually adding the information to a tailwind conjuration.

Not to worry. I have a manual solution that will suffice,.

4

Right. I think your order is backwards there. The tailwind asset generation would run before/when you deployed the theme, when the accent color is not available.

5

This is as per the v4 configuration.

6

Can you try setting the value to a variable?

i.e:

@theme {
  --color-site-500: var(--ghost-accent-color);
}