Skip to content
Advertisement

Symfony 5 won’t load CSS file [closed]

I am new to Symfony (and this is my first time posting here). I’m working on a project, however Symfony won’t load the css file. I have installed Asset already.

I have tried loading the file both with asset{{}} and without. Also I tried including /public and without.

The ways I have tried :

<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

Any help would be appreciated, thanks!

I have the same problem but only using apache virtual host: The vhost configuration:

    <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>

With my WAMPserver running, going directly to http://localhost/les4/public/, works perfectly. Going to the progdemo.local, does not render css stylesheet.

The template:

<!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>

The “miostile.css” file:

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

The Chrome console messages:

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)"

Some hints:

  1. the pages source code are identical
<!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>

but…!!: if, in the browse source code display of the OK page, i click the

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

a new page “http://localhost/les4/public/css/miostile.css” is opened showing the css file content

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

Doing the same on the KO page, the opened page “http://progdemo.local/les4/public/css/miostile.css” shows a symfony error “No route found for “GET /les4/public/css/miostile.css”

"ERROR
11:10:27
request Uncaught PHP Exception SymfonyComponentHttpKernelExceptionNotFoundHttpException: "No route found for "GET /les4/public/css/miostile.css"" at C:wamp64wwwles4vendorsymfonyhttp-kernelEventListenerRouterListener.php line 136"
  1. Same problems If using the “asset” function
<link  href={{ asset ('css/miostile.css') }}  rel="stylesheet">

the OK page shows

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

and still works perfectly. The KO page shows

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

but does not work as well (css not rendered and message “No route found for “GET /css/miostile.css”when clicked.

Available if further investigation is needed

Ciao!

Advertisement

Answer

You rendering assets in twig template (evidence by <link rel="stylesheet" href="{{ asset('/build/css/app.css') }}"> from your question). More details like this and if you are using Symfony webpack Encore would be useful.

Solution one (without webpack encore)#

Since you said you are now to Symfony in this solution i will assume you are rending in twig template and you have placed your custom app.css in public/build/css/app.css. According to the Symfony Docs, first, install the asset package: composer require symfony/asset. You can now use the asset() function:

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

Note: The assets package will auto add the path public/build/

Solution Two (with webpack encore)#

From the photo you shared it looks like the assets were generated by Symfony Webpack Encore because i see the runtime.js, manifest.json, and entrypoints.json. If this is case, you still need to install asset package as i described in solution one. From the Symfony Docs you can use two Twig helpers from WebpackEncoreBundle to do most of the work for you:

       {% 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 %}

In solution 2 am assuming you already familiar with Symfony Webpack Encore. If not this link is a good starting point: Managing CSS and JavaScript in Symfony

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement