inline_css

这个 inline_css 筛选HTML文档中的内联CSS样式：

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

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

也可以对包含的文件使用筛选器：

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环境中显式添加扩展：：

use Twig\Extra\CssInliner\CssInlinerExtension;

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