如何在外部CSS文件中呈现细枝变量？

我正在构建小树枝页面，我想在HTML

中加载外部CSS文件。在我的CSS中，我使用图像的动态路径，例如

背景图像：url（{{file.find（'campaign/assets/icon.png'）}）

我知道可以使用
{%load“CSS/styles.CSS”%}
加载CSS，但我希望将样式表保存在一个单独的文件中，以便缓存客户端，而不是将代码内联保存在
中

我搜索了这么多，发现了几个问题，主要是关于如何用twig编写CSS，但没有一个是关于如何处理包含twig代码的CSS文件，同时保持文件的外部性

我尝试使用
，但它只将细枝代码视为纯文本。甚至可以做我想做的事吗？也许在提供服务之前对CSS+细枝进行预处理并将其转换为普通CSS文件
 解决这一问题的方法是将
style.css
重写为
php
文件，该文件能够呈现基于
小树枝的css文件

html

style.php

style.twig.css

嗨，不知道这个解决方案是否有用，但这解决了我的问题。我的情况是，我有一个英雄部分，加载一个css中的图像：在定义之前，但我希望图像可以动态更改，我使用细枝

CSS之前：

.hero_single.version_2:before {
  background: url(../img/home_section_2.jpg) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero_single.version_2:before {
  background: var(--hero-image-url) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

{% block customVendorsCss %}
{% set test = 'home_section_2.jpg' %}
<style>
:root {
  --hero-image-url: url(../img/{{ test }});
}
</style>
{% endblock %}

CSS之后：

.hero_single.version_2:before {
  background: url(../img/home_section_2.jpg) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero_single.version_2:before {
  background: var(--hero-image-url) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

{% block customVendorsCss %}
{% set test = 'home_section_2.jpg' %}
<style>
:root {
  --hero-image-url: url(../img/{{ test }});
}
</style>
{% endblock %}

之后的细枝：

.hero_single.version_2:before {
  background: url(../img/home_section_2.jpg) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero_single.version_2:before {
  background: var(--hero-image-url) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

{% block customVendorsCss %}
{% set test = 'home_section_2.jpg' %}
<style>
:root {
  --hero-image-url: url(../img/{{ test }});
}
</style>
{% endblock %}

{%block customVendorsCss%}
{%set test='home\u section\u 2.jpg%}
：根{
--英雄图像url:url（../img/{{test}）；
}
{%endblock%}

在我的示例中，我有一个块ans定义了一个css变量，该变量内部有一个twig变量（在本例中，该变量是静态的，但将是一个来自数据库的变量）

这就解决了我的css问题：before.
简而言之，创建一个
style.php
，创建从
style.css
到
style.php
的重写规则，创建一个名为
style.twig.html
的视图。让
style.php
使用
twig
呈现该视图。您可以创建一个*.css.twig文件，从控制器调用它，并将其与定义的路由链接…@pbenard这是一个有趣的方法。从未想过只注册一条路线。你不怕你正在使用的框架的启动时间会导致（太大）延迟吗？@DarkBee我用这种方式处理大数据多站点，它完成了它的工作，也许缓存设置是有用的。。。。下面是一个活生生的例子：