How can I use metafields in a css.liquid file for styling?

[noovo]

I am trying to style a div with css but by using metafield data.. example below:

.top-bar {
  background-color: {{ product.metafields.my_fields.colour.value }}important;

}

Sadly this isnt working, it works if I use inline styles in the main product.liquid file. Is it not possible to use metafields in a css file?

Many thanks.

[supermonkey100]

Hey,

did you happen to find a solution for this?

I too am faced with this problem. I created a custom css.liquid file in assets and would like to define a background-color for a css class, which would be defined under products -> custom metafield for selecting a color from a color picker.

I cannot get the value of the color to pass to the css file. I keep on getting empty values when rendering the page.

Any help would be appreciated.

[noovo]

The way I did it was to add the metafield as an inline color on the div rather than in the css. It worked a treat.

[supermonkey100]

Thanks for the quick reply. I am afraid that is not applicable in our case.

We are trying to define a background color of a box within the product description based on the metafield value. Unfortunately, metafield values cannot be passed directly to the html editing in product description, so our only way is through the css liquid file.

Thanks anyway - good luck!