Including Assets (CSS, JS) in Symfony 4 / Twig Template
Question
Im learning Symfony and trying to set up a boilerplate app in Symfony 4
This Symfony document describes how to include assets in your page, namely using the asset package like so..
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />
I have installed this package and trying to link to a css file in my /public directory.
I know Symfony recommends placing assets in an /assets folder at the root, but I would like to avoid this if possible. It makes more sense to me to place assets in the public directory.
My Twig base template is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
<footer>footer</footer>
</html>
Problem
When I load the route/page/template, the linked css is rendered as a simple link from the root (as if Im linking it as <link href="public/css/main.css" rel="stylesheet" /> - there is of course no route set for public/* and this returns 404/Not Found .
Its as if the asset() function is not even used.
Ive tried
- Restarting my local Symfony server
- moving the asset to an
assetsfolder at the root at adjusting the link accordingly - verifying that the
assetpackage was installed (it is) - googling this issue (nothing for Symfony 4)
Questions
- How can I let Symfony know that the
public/*path is a filesystem path to assets, NOT a URL route, and include my assets successfully? - Is there such a feature to set a default location for assets other than the recommended
/assetsfolder at the root?
3 answers
solution1
19 ACCPTED 2018-02-21 18:54:54
Paths in the asset function should be relative to your public directory, not the project root.
So, pretending your server's docroot is public_html , and an asset is in public_html/css/main.css , the asset call would be {{ asset('css/main.css') }} .
Additional note: The asset function doesn't give you the ability to put assets outside the public directory. They must be in the public directory.
solution2
2 2020-08-16 12:53:10
Firstly maybe you have to add the asset functionality to Symfony:
composer require symfony/asset
Then you should to use in Twig temlate the relative path to your public directory:
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
for the public/css/style.css style file.
BTW it is also works for Symfony 5.
solution3
0 2019-12-16 19:17:32
检查 webpack 是否正在监视文件...（纱线监视）经过数小时的寻找答案后，我的一名项目团队成员问我是否运行了 ={ 之后立即工作。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.