跟随链接时无法正确加载 Css答案

【问题标题】：Css cannot be loaded correctly when following a link跟随链接时无法正确加载 Css
【发布时间】：2021-02-23 09:59:24
【问题描述】：

我的主页带有引导主题。

当我继续时：localhost/boardgamedb/public/index.php

一切看起来都很好。

但是，当我点击“主页”链接时，我会被重定向到：localhost/boardgamedb/public/index.php/（考虑到我的控制器，正常情况下）

我确实得到了相同的内容，但没有 css（我还不知道 JS）

我的 base.html.twig 是：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" href="style/bootstrap.min.css">
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="{{ path('homepage') }}">Boardgame DB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{{ path('homepage') }}">Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            
            </ul>
            
        </div>
    </nav>
        {% block body %}{% endblock %}
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

我的 home.html.twig ：

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

{% block body %}
    <h1>Test2</h1>
{% endblock %}

我的控制器是：

class BgdbController extends AbstractController{

    /** 
    * @Route("/", name="homepage")
    */
    public function home() {
        return $this->render(
            "home.html.twig"
        );

    }
}

我不明白为什么 css 可以在一个上工作，但不能在另一个上工作，可能是到 css 文件的路径有问题。

【问题讨论】：

使用绝对路径，像这样：/style/bootstrap.min.css
在 URL 末尾添加 / 后，“文件夹深度”现在已更改，因此将相对 URL 解析为样式表，现在会导致不同的绝对 URL - 错误一。最简单的解决方案是使用以 / 开头的相对 URL 来引用您的外部资产 - 这些总是引用域根目录。
试过但没用
资产在哪里？

标签： php css symfony twig bootswatch

【解决方案1】：

好的，最后我设法按照建议的相同想法解决了这个问题，但不同。

编辑：我不得不对整个地址使用绝对链接：

/boardgamedb/public/style/bootstrap.min.css

其他任何东西都不起作用。

【讨论】：

使用/boardgamedb/public/style/bootstrap.min.css
如果系统生成绝对路径就可以了。如果硬编码将无法工作。
我打算在上线时更改它，但您的路径正在运行，谢谢！！！！

【解决方案2】：

另一种做法是使用资产组件，它会在项目的任何地方生成正确的路径：首先，您必须检查它是否尚未安装：

composer show -i

如果你没有“symfony/asset”行，那么你必须安装组件：

composer require symfony/asset

如果您的文件在您的项目中：“public/style/bootstrap.min.css”，那么您的代码应该是：

<link href=”{{ asset(‘style/bootstrap.min.css’) }}” rel=”stylesheet”/>

关于资产的 Symfony 文档解释得很好：https://symfony.com/doc/current/templates.html

更好的做法是使用 Webpack-Encore，但设置起来有点复杂。

【讨论】：