如何使用html模板系统传递“css属性”

Question

我正在使用nunjucks构建一个组件库，有时我需要传递varialbes来更改例如背景图像，nunjucks不解析css文件，我最终设置内联样式如下：

包含组件并传递背景图片

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

component.njk文件

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

我可以把它放在里面＆lt;风格＆gt;组件内部的标签，但它不是html标准

这是无效的html：S

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

要解决此问题，我正在尝试在标头标记内附加组件样式标记。

是否有任何gulp插件？ 有没有更好的解决方案？

我找到了一个cool "plugin" for nunjucks来附加来自子视图的代码，但它似乎过时了：S

Thansk这么多！