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 :

JavaScript

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:

JavaScript

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:

JavaScript

The “miostile.css” file:

JavaScript

The Chrome console messages:

JavaScript

Some hints:

  1. the pages source code are identical
JavaScript

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

JavaScript

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

JavaScript

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”

JavaScript
  1. Same problems If using the “asset” function
JavaScript

the OK page shows

JavaScript

and still works perfectly. The KO page shows

JavaScript

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:

JavaScript

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:

JavaScript

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