0

I'm building a component library with nunjucks and some times I need to pass varialbes to change for example a background image, nunjucks doesn't parse css files and I ended up setting inline styles like so:

Includes the component and pass the background image

{% set comp = { 'image': 'foo.jpg' } %}
{% include 'component.njk' %}

component.njk file

<div class='comp' styles="background-image: url({{ comp.image }});"></div>

I could put it inside < style > tags inside the component but it's not html standar

This is not valid html :S

<style>.comp { background-image: url({{ comp.image }}); }</style>
<div class='comp' styles=""></div>

To solve that I'm trying to append component styles tags inside the header tag.

Is there any gulp plugin or something? Is there any better solution to this?

I found a cool "plugin" for nunjucks to append code from subviews but it seems outdated :S

Thansk so much!

Francis Vega
  • 152
  • 1
  • 2
  • 10
  • Do you want to reuse your style in different projects and change the `background-image` or other styles for the whole project or do you need to also change the style on individual sites of your project? – t.niese Jul 15 '16 at 17:33
  • I'll use the component across the whole project with differents values of background image. – Francis Vega Jul 15 '16 at 18:55
  • I would be happy if I could use this, but just works in firefox: http://www.w3schools.com/tags/att_style_scoped.asp – Francis Vega Jul 15 '16 at 19:05

0 Answers0