【问题标题】：Symfony 5 won't load CSS file [closed]Symfony 5 不会加载 CSS 文件 [关闭]
【发布时间】：2021-01-17 07:31:13
【问题描述】：

我是 Symfony 的新手（这是我第一次在这里发帖）。我正在做一个项目，但是 Symfony 不会加载 css 文件。我已经安装了 Asset。

我尝试使用资产{{}} 和不加载文件。我也尝试过包含 /public 和不包含。

我尝试过的方法：

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

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

<link rel="stylesheet" href="/public/build/css/app.css'">

<link rel="stylesheet" href="/build/css/app.css'">

<link rel="stylesheet" href="../../public/build/css/app.css'">

Here is a photo of my files

任何帮助将不胜感激，谢谢！

我有同样的问题，但只使用 apache 虚拟主机：虚拟主机配置：

    <VirtualHost *:80>
        ServerName  progdemo.local
        ServerAlias www.progdemo.local
        DocumentRoot "C:/wamp64/www/les4/public"
        <Directory  "C:/wamp64/www/les4/public">
            AllowOverride None
            Order Allow,Deny
            Allow from All 
            Require local
        </Directory>

        ErrorLog  C:/wamp64/www/les4/var/log/project_error.log
        CustomLog C:/wamp64/www/les4/var/log/project_access.log combined
        # from .htacces :
        DirectoryIndex index.php

        <IfModule mod_negotiation.c>
            Options -MultiViews
        </IfModule>

        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteCond %{REQUEST_URI}::$0 ^(/.+)/(.*)::\2$
            RewriteRule .* - [E=BASE:%1]
            RewriteCond %{HTTP:Authorization} .+
            RewriteRule ^ - [E=HTTP_AUTHORIZATION:%0]
            RewriteCond %{ENV:REDIRECT_STATUS} =""
            RewriteRule ^index\.php(?:/(.*)|$) %{ENV:BASE}/$1 [R=301,L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteRule ^ %{ENV:BASE}/index.php [L]
    </IfModule>

    <IfModule !mod_rewrite.c>
        <IfModule mod_alias.c>
            RedirectMatch 307 ^/$ /index.php/
        </IfModule>
    </IfModule>
    # from .htacces End
</VirtualHost>

在我的 WAMPserver 运行的情况下，直接访问 http://localhost/les4/public/，可以完美运行。转到 progdemo.local，不渲染 css 样式表。

模板：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Let's Explore Symfony 4</title>
 <!-- Bootstrap core CSS -->
     
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
          crossorigin="anonymous">
    <link  href="/les4/public/css/miostile.css"   rel="stylesheet">
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <div class="container">

                <a class="navbar-brand" href="#">Home</a>

                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/hello">Hello Page</a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
    </header>

    <main role="main" class="container main">
        <div>
            <h1>Let's Explore Symfony 4</h1>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum sapien mauris, venenatis
                facilisis neque tincidunt vel. Maecenas vel felis vel turpis scelerisque eleifend. Fusce nec purus egestas,
                efficitur nisi ac, ultrices nulla. Pellentesque eu mollis tortor, in mollis nisl. Maecenas rhoncus quam non
                lacinia mollis.</p>
        </div>
    </main>
</body>
</html>

“miostile.css”文件：

.main {margin-top:  90px; background-color: aqua; }

Chrome 控制台消息：

miostile.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
miostile.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)"

一些提示：

页面源代码完全相同


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Let's Explore Symfony 4</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
          crossorigin="anonymous">
    <link  href="/les4/public/css/miostile.css"   rel="stylesheet">

</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <div class="container">

                <a class="navbar-brand" href="#">Home</a>

                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/hello">Hello Page</a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
    </header>

    <main role="main" class="container main">
        <div>
            <h1>Let's Explore Symfony 4</h1>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum sapien mauris, venenatis
                facilisis neque tincidunt vel. Maecenas vel felis vel turpis scelerisque eleifend. Fusce nec purus egestas,
                efficitur nisi ac, ultrices nulla. Pellentesque eu mollis tortor, in mollis nisl. Maecenas rhoncus quam non
                lacinia mollis.</p>
        </div>
    </main>

.... and so on
</html>

但是...!!：如果，在OK页面的浏览源代码显示中，我点击了

<link  href="/les4/public/css/miostile.css"   rel="stylesheet">

打开一个新页面“http://localhost/les4/public/css/miostile.css”显示css文件内容

 ".main {margin-top:  90px; background-color: aqua; } "

在 KO 页面上做同样的事情，打开的页面 "http://progdemo.local/les4/public/css/miostile.css" 显示 symfony 错误 "No route found for "GET /les4/public/css /miostile.css"

"ERROR
11:10:27
request Uncaught PHP Exception Symfony\Component\HttpKernel\Exception\NotFoundHttpException: "No route found for "GET /les4/public/css/miostile.css"" at C:\wamp64\www\les4\vendor\symfony\http-kernel\EventListener\RouterListener.php line 136"

如果使用“资产”功能也会出现同样的问题

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

OK 页面显示

<link  href=/les4/public/css/miostile.css  rel="stylesheet">

并且仍然可以完美运行。 KO页面显示

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

但效果不佳（css 未呈现并在单击时显示“未找到“GET /css/miostile.css”的路由。

如果需要进一步调查可用

Ciao！

【问题讨论】：

您的浏览器的网络控制台会告诉您什么？
另外，您尝试过什么来解决这个问题？据我了解您的文件列表，CSS 存储在public/build/app.css，而不是任何子文件夹中
我尝试使用以下两种方式加载 css 文件：和以及没有 /public。该文件位于子 css 文件中。控制台显示 GET localhost:8000/css/app.css net::ERR_ABORTED 404 (Not Found)
这仍然是错误的，除非您将 CSS 文件放在 public/build/css/app.css - 根据您文件的屏幕截图，这只是不是您使用的位置远
是的，我把它移到了css文件中，但是控制台说：加载资源失败：服务器响应状态为404（未找到）

标签： php css symfony bootstrap-4

【解决方案1】：

您在树枝模板中渲染资产（<link rel="stylesheet" href="{{ asset('/build/css/app.css') }}"> 来自您的问题的证据）。像这样的更多细节以及如果你使用 Symfony webpack Encore 将会很有用。

解决方案一（没有 webpack encore）#

既然您说您现在在此解决方案中使用 Symfony，我将假设您正在使用 twig 模板进行渲染，并且您已将自定义 app.css 放置在 public/build/css/app.css 中。根据Symfony Docs，首先安装资产包：composer require symfony/asset。您现在可以使用asset() 函数：

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

注意：assets package 将自动添加路径 public/build/

解决方案二（使用 webpack encore）#

从您分享的照片看来，资产是由 Symfony Webpack Encore 生成的，因为我看到了 runtime.js、manifest.json 和 entrypoints.json。如果是这种情况，您仍然需要按照我在解决方案一中的描述安装资产包。在 Symfony Docs 中，您可以使用 WebpackEncoreBundle 中的两个 Twig 助手为您完成大部分工作：

       {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}

            <!-- Renders a link tag (if your module requires any CSS)
                 <link rel="stylesheet" href="/build/app.css"> -->
        {% endblock %}
      {% block javascripts %}
            {{ encore_entry_script_tags('app') }}

            <!-- Renders app.js & a webpack runtime.js file
                <script src="/build/runtime.js"></script>
                <script src="/build/app.js"></script> -->
        {% endblock %}

在解决方案 2 中，假设您已经熟悉 Symfony Webpack Encore。如果不是这个链接是一个很好的起点：Managing CSS and JavaScript in Symfony

【讨论】：

谢谢，我按照解决方案 2，在 addEntry() 的第一个参数中添加了“app”。我还将阅读在 Symfony 中管理 CSS 和 JavaScript。