在 Symfony 4 / Twig 模板中包含资产 (CSS, JS)

Question

我正在学习 Symfony 并尝试在 Symfony 4 中设置样板应用程序

This Symfony document 描述了如何在您的页面中包含资源，即像这样使用 asset 包..

<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />

<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />

我已经安装了这个包，并试图 link 到我的 /public 目录中的 css 文件。

我知道 Symfony 建议将资产放在根目录下的 /assets 文件夹中，但我想尽可能避免这种情况。将资产放在 public 目录中对我来说更有意义。

我的Twig基础模板如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block stylesheets %}
            <link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
    <footer>footer</footer>
</html>

问题

当我加载 route/page/template 时，linked css 从根目录呈现为一个简单的 link（就像我 linking它作为 <link href="public/css/main.css" rel="stylesheet" /> - 当然没有为 public/* 和这个 returns 404/Not Found.

设置路线

好像连asset()功能都没用过。

我试过了

正在重启我的本地 Symfony 服务器
将资产移动到根目录下的 assets 文件夹中，相应地调整 link
正在验证 asset 软件包是否已安装（已安装）
谷歌搜索这个问题（Symfony 4 没有）

问题

如何让 Symfony 知道 public/* 路径是资产的文件系统路径，而不是 URL 路径，并成功包含我的资产？
除了推荐的 /assets 文件夹之外，是否有这样的功能可以为资源设置默认位置？

Answer 1

asset 函数中的路径应该相对于您的 public 目录，而不是项目根目录。

因此，假设您的服务器的文档根目录是 public_html，资产在 public_html/css/main.css 中，资产调用将是 {{ asset('css/main.css') }}。

补充说明：asset 函数无法让您将 assets 放在 public 目录之外。它们必须在public目录中。

Answer 2

检查 webpack 是否正在监视文件...（yarn watch）在寻找答案数小时后，我的一位项目团队成员问我是否有运行 ={ 在那之后立即工作。

Answer 3

首先，您可能必须将资产功能添加到 Symfony：

composer require symfony/asset

那么你应该在 Twig 模板中使用你的 public 目录的相对路径：

<link href="{{ asset('css/style.css') }}" rel="stylesheet" />

用于 public/css/style.css 样式文件。

顺便说一句，它也适用于 Symfony 5。

在 Symfony 4 / Twig 模板中包含资产 (CSS, JS)

Including Assets (CSS, JS) in Symfony 4 / Twig Template

css

php

symfony

twig

symfony4