Question

我正在构建twig页面，我想在HTML <head>中加载外部CSS文件。在我的CSS中，我使用动态路径来处理图像，例如

background-image:url("{{file.find('campaign/assets/icon.png')}}");

我知道可以使用{% load "css/styles.css" %}加载CSS，但我希望将样式表保存在一个单独的文件中，我可以缓存客户端，而不是将代码保持在<head>内。 / p>

我搜索了SO并发现了几个问题，主要与如何使用twig编写CSS有关，但没有关于如何使用twig代码处理我的CSS文件同时保持文件外部。

我尝试使用<link rel...>但它只是将twig代码视为纯文本。甚至可以做我想做的事情吗？也许预先处理CSS + twig并在服务之前将其转换为纯CSS文件？

Answer 1

解决此问题的方法是将style.css重写为php文件，该文件能够呈现基于twig的css文件

HTML 的

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/default.css">
    </head>
    <body>
        <div id="output"></div>
        <script>
        $(function() {

        });
        </script>
    </body>
</html>

的.htaccess

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^css/style.css css/style.php [QSA,L]

style.php

require __DIR__ . '/vendor/autoload.php';
//any code to boot up your $twig environment

echo $twig->render('css/style.twig.css', [
    'rules' => [
        'h1' => ['font-size' => '26 px', 'font-weight' => 'bold', 'color' => 'red', ],
    ],
]);

style.twig.css

{% for selector, selector_rules in rules %}
    {{ selector }} {
        {% for key, value in selector_rules %}
            {{ key }}: {{ value }};
        {% endfor %}
    }
{% endfor %}

Answer 2

您好，不知道此解决方案是否有用，但这可以解决我的问题。我的情况是，我有一个英雄部分，它将css：before定义中的图像加载，但我希望图像可以动态更改并且我使用TWIG。

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;
}

CSS之后：

.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;
}

TWIG之后：

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

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

这解决了我的CSS问题：之前。

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

2 个答案: