【问题标题】：How to include CSS file in Symfony 2 and Twig?如何在 Symfony 2 和 Twig 中包含 CSS 文件？
【发布时间】：2012-08-23 07:53:01
【问题描述】：

我在玩 Symfony2，我遇到了问题，包括 Twig 中的 CSS 和 JS 文件模板。

我有一个名为Webs/HomeBundle 的包，其中有HomeController 和indexAction，它呈现一个树枝模板文件：

public function indexAction()
{
    return $this->render("WebsHomeBundle:Home:index.html.twig");
}

所以这很容易。现在我想做的是在这个 Twig 模板中包含一些 CSS 和 JS 文件。模板如下所示：

<!DOCTYPE html>
<html>
<head>  
    {% block stylesheets %}
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
</head>
<body>
</body>
</html>

我要包含的文件，main.css 文件位于：

Webs/HomeController/Resources/public/css/main.css

所以我的问题基本上是，我到底如何在 Twig 模板中包含简单的 CSS 文件？

我正在使用 Twig asset() 函数，它只是没有找到正确的 CSS 路径。另外，我在控制台中运行这个命令：

app/console assets:install web

这创建了一个新文件夹

/web/bundles/webshome/...

这只是链接到

src/Webs/HomeController/Resources/public/

对吗？

问题

您将资产文件、JS、CSS 和图像放在哪里？可以将它们放在Bundle/Resources/public 文件夹中吗？这对他们来说是正确的位置吗？
如何使用资产功能将这些资产文件包含在您的 Twig 模板中？如果它们在公用文件夹中，我该如何包含它们？
我应该配置其他东西吗？

【问题讨论】：

标签： symfony twig

【解决方案1】：

除了将包路径传递给 asset() 函数之外，您所做的一切都是正确的。

根据documentation - 在您的示例中，这应该如下所示：

{{ asset('bundles/webshome/css/main.css') }}

提示：您也可以使用--symlink 键调用 assets:install，这样它会在 web 文件夹中创建符号链接。这在您经常应用 js 或 css 更改时非常有用（这样您的更改，应用于 src/YouBundle/Resources/public 将立即反映在 web 文件夹中，无需再次调用 assets:install）：

app/console assets:install web --symlink

此外，如果您希望在子模板中添加一些资产，您可以为 Twig 块调用 parent() 方法。在你的情况下，它会是这样的：

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}

【讨论】：

app/console assets:install --watch 会在资产改变时自动重新生成
@Radu 是的，但是如果您创建符号链接，则不需要 --watch

【解决方案2】：

你可以使用 %stylesheets% (assetic feature) 标签：

{% stylesheets
    "@MainBundle/Resources/public/colorbox/colorbox.css"
    "%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

您可以将路径写入 css 作为参数 (%parameter_name%)。

有关此变体的更多信息：http://symfony.com/doc/current/cookbook/assetic/asset_management.html

【讨论】：

【解决方案3】：

其他答案是有效的，但Official Symfony Best Practices 指南建议使用web/ 文件夹来存储所有资产，而不是不同的捆绑包。

将您的网络资产分散在数十个不同的捆绑包中更难管理它们。你的设计师的生活会很丰富如果所有应用程序资产都在一个位置，则更容易。

模板还可以从资产集中化中受益，因为链接更简洁[...]

我建议您仅将微资产放在微包中，例如仅在按钮包中的按钮需要的几行样式。

【讨论】：

【解决方案4】：

如果您使用 Silex，请添加 Symfony 资产 作为依赖项：

composer require symfony/asset

那么您就可以注册资产服务商：

$app->register(new Silex\Provider\AssetServiceProvider(), array(
    'assets.version' => 'v1',
    'assets.version_format' => '%s?version=%s',
    'assets.named_packages' => array(
        'css' => array(
            'version' => 'css2',
            'base_path' => __DIR__.'/../public_html/resources/css'
        ),
        'images' => array(
            'base_urls' => array(
                'https://img.example.com'
            )
        ),
    ),
));

然后在 Twig 模板文件的 head 部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block head %}
    <link rel="stylesheet" href="{{ asset('style.css') }}" />
    {% endblock %}
</head>
<body>

</body>
</html>

【讨论】：

根据文档，您还应该添加 twig-bridge (composer require symfony/twig-bridge)