Comment inclure le fichier CSS dans Symfony 2 et Twig?

Je suis en train de jouer autour avec Symfony2, et j'ai des problèmes, y compris CSS et JS fichiers dans Twig modèle.

J'ai un paquet nommé Webs/HomeBundle à l'intérieur duquel j'ai HomeController avec {[8] } qui rend un fichier de modèle de brindille: 

public function indexAction()
{
    return $this->render("WebsHomeBundle:Home:index.html.twig");
}

, Donc c'est facile. Maintenant, ce que je veux faire, c'est d'inclure des fichiers CSS et JS dans ce modèle de brindille. Le modèle ressemble à ceci: 

<!DOCTYPE html>
<html>
<head>  
    {% block stylesheets %}
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
</head>
<body>
</body>
</html>

Le fichier que je voudrais comprendre, main.css fichier est situé dans: 

Webs/HomeController/Resources/public/css/main.css

Donc, ma question est fondamentalement, comment diable puis-je inclure un fichier CSS simple dans le modèle Twig?

J'utilise la fonction Twig asset() et elle n'atteint tout simplement pas le bon chemin CSS. En outre, j'exécute cette commande dans la console: 

app/console assets:install web

Cela a créé un nouveau dossier

/web/bundles/webshome/...

C'est juste un lien vers le 

src/Webs/HomeController/Resources/public/

Pas Vrai?

Questions

  1. où placez-vous vos fichiers asset, JS, CSS et images? Est-il OK pour les mettre dans Bundle/Resources/public dossier? Est-ce le bon endroit pour eux?
  2. Comment incluez-vous ces fichiers asset dans votre modèle Twig en utilisant la fonction asset? S'ils sont dans un dossier public, Comment puis-je les inclure?
  3. dois-je configurer autre chose?
60
demandé sur Trix 0000-00-00 00:00:00

3 réponses

Vous faites tout correctement, sauf en passant votre chemin d'accès à la fonction asset().

Selon documentation - dans votre exemple, cela devrait ressembler ci-dessous: 

{{ asset('bundles/webshome/css/main.css') }}

Astuce : Vous pouvez également appeler assets: install avec la touche --symlink, afin de créer des liens symboliques dans le dossier web. Ceci est extrêmement utile lorsque vous appliquez souvent des modifications js ou css (de cette façon, vos modifications appliquées à src/YouBundle/Resources/public seront immédiatement reflétées dans le dossier web sans avoir besoin d'appeler assets:install encore): 

app/console assets:install web --symlink

Aussi, si vous souhaitez ajouter certains actifs de votre enfant modèle, vous pouvez l'appeler parent() méthode pour le bloc Twig. Dans votre cas, ce serait comme ceci: 

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
75
répondu Vitalii Zurian 2016-02-29 14:31:31

Et vous pouvez utiliser la balise % stylesheets% (assetic feature): 

{% stylesheets
    "@MainBundle/Resources/public/colorbox/colorbox.css"
    "%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

Vous pouvez écrire le chemin vers css en tant que paramètre (%parameter_name%).

En savoir plus sur cette variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

11
répondu ZhukV 2016-09-19 05:21:46

Les autres réponses sont valides, mais le guide Officiel Symfony Best Practices suggère d'utiliser le dossier web/ pour stocker tous les actifs, au lieu de d

3
répondu