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'">
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:
- 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”
"ERROR11:10:27request Uncaught PHP Exception SymfonyComponentHttpKernelExceptionNotFoundHttpException: "No route found for "GET /les4/public/css/miostile.css"" at C:wamp64wwwles4vendorsymfonyhttp-kernelEventListenerRouterListener.php line 136"- 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