Css 未应用于 Symfony 中的页面？

Question

我有一个页面没有应用 css。我在 templates 中有一个名为 animal 的文件夹，它包含 2 个文件 adopt.html.twig 和 index.html.twig 以及 base.html.twig。为什么 css 不适用于 adopt.html.twig？

我的代码是：

adopt.html.twig

{% extends 'base.html.twig' %}

{% block title %}Adopt an animal!{% endblock %}

{% block body %}
    <ul>
        <li class="articleItem">
            <img src="/dog.png" alt="article icon">
            <h4>Thanks ! </h4>
            <p>{{ animal.name }} is your new Compagnon </p>
            <button class="button"><a href="/animals">Go back</a></button>
            <button class="button"><a href="/adoptions">See adoptions</a></button>
        </li>
    </ul>
{% endblock %}

base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="css/styles.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
{% block head %}
    {% include 'partials/header.html.twig' %}
{% endblock %}

{% block body %}{% endblock %}

{% block footer %}
    {% include 'partials/footer.html.twig' %}
{% endblock %}
</body>
</html>
</html>

Answer 1

您的 css/style.css 已链接到当前 URL。所以它适用于主页，但不适用于任何子页面 URL（在 Symfony 中，这意味着除 / 之外的任何具有 @Route 的控制器）。

因此，如果您打开 https://your.domain.tld/，浏览器将从 https://your.domain.tld/css/style.css 读取 style.css。但是如果你打开 https://your.domain.tld/adopt/，浏览器会尝试从 https://your.domain.tld/adopt/css/style.css.

读取 style.css

在 Symfony 中，可以使用

来解决这个问题

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

而不是：

<link href="css/styles.css" rel="stylesheet">

请阅读Creating and Using Templates: Linking to Assets

Css 未应用于 Symfony 中的页面？

Css not aplied to page in Symfony?

symfony

twig