`inline_css`

inline_css 过滤器将 CSS 样式内联到 HTML 文档中

        1
2
3
4
5
6
7
8
9
10
11
12
        {% apply inline_css %}
    <html>
        <head>
            <style>
                p { color: red; }
            </style>
        </head>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
    

您还可以通过将样式表作为参数传递给过滤器来添加一些样式表

        1
2
3
4
5
6
7
        {% apply inline_css(source("some_styles.css"), source("another.css")) %}
    <html>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
    

通过过滤器加载的样式会覆盖 HTML 文档的 <style> 标签中定义的样式。

您还可以在包含的文件上使用该过滤器

        1
2
3
        {{ include('some_template.html.twig')|inline_css }}

{{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}
    

请注意，CSS 内联器适用于整个 HTML 文档，而不是片段。

注意

inline_css 过滤器是 CssInlinerExtension 的一部分，默认情况下未安装。请先安装它

        1
        $ composer require twig/cssinliner-extra
    

然后，在 Symfony 项目上，安装 twig/extra-bundle

        1
        $ composer require twig/extra-bundle
    

否则，在 Twig 环境中显式添加扩展

        1
2
3
4
        use Twig\Extra\CssInliner\CssInlinerExtension;

$twig = new \Twig\Environment(...);
$twig->addExtension(new CssInlinerExtension());
    