Discussion :

[Jérémie17]

Bonjour,

j'essaie d'installer un bon environnement de développement (symfony) mais impossible de comprendre l'histoire des assets.
Même avec la doc officielle, je ne trouve pas cela clair.

Je souhaite pouvoir utiliser symfony 4.2 avec du css (bootstrap) et du javascript (jquery).
Je tombe sur plusieurs tutoriels mais tous disent des choses différentes.

Je souhaite pouvoir utiliser les dernières méthodes mais sans être obliger d'utiliser des technologies "imposées"
Dans la doc officielle il est recommandé d'utiliser "Encore" pour la gestion des assets.
Sauf qu'il est demandé d'installer NodeJs au préalable. Cependant, je ne souhaite pas utiliser Nodejs, mais seulement jquery.

Ensuite, est-il possible de se passer de Encore ?
Faut-il installer "asset" (composer require asset) obligatoirement avec Encore?
Peut-on utiliser uniquement "asset" ?

Pas moyen de trouver une explication claire.

Si vous pouviez m'éclaircir un peu plus ?
En vous remerciant
Jérémie

[dukoid]

en fait Encore utilise webpack qui utilise nodejs

ce sont 2 outils qui servent uniquement à gérer les ressources, qui donc au final permet d'avoir un des fichiers css et des fichiers js pour la PROD
en gros, ces outils sont là mais n'est pas utilisé en prod pour le site..

pour jQuery c'est pourtant bien expliqué !

[Jérémie17]

Merci pour la réponse Dukoid.

J'aimerais allé au plus simple, idéalement sans utiliser Encore, j'ai vu un tutoriel parlant de asset.
composer require asset
avec dans le base.html.twig.

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        {% block stylesheets %}  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨>  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨>  
        {% endblock %}

et

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        {% block javascripts %}  
            <script src="{{ asset('js/jquery-3.4.0.min.js') }}" type="text/javascript"></script>  
        {% endblock %}

Est-ce possible ?
Merci

[dukoid]

tout est possible.

faut mettre tes fichiers dans /web/css/... /web/js/...

[benjamin-]

hello c'est tout a fait possible par contre les fichiers statiques sont a mettre dans le dossier public qui est présent dans ton projet a la racine dans ton cas :

/public/css/bootstrap.css
/public/css/styles.css

/public/js/jquery-3.4.0.min.js

Puis tu fait appel avec {{ asset() }} dans ton template twig comme dans ton exemple par contre ne pas ajouter "public" dans le chemin du css ou js

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
{% block stylesheets %}  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨>  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨>  
{% endblock %}

[Jérémie17]

Bonjour,
merci pour vos réponses.
J'ai bien fait tout ce que vous m'avez indiqué (il me semble), mais toujours aucun résultat.
Voici ce que j'obtiens en visionnant le code source de la page HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap.min.css¨>
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap-theme.min.css¨>

Et quand je clique sur un fichier css j'obtiens :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<title>    No route found for &quot;GET /%C2%A8/css/bootstrap.min.css%C2%A8&quot; (404 Not Found)  </title>

En fait il ne semble pas trouver les fichiers css...

En vous remerciant,

Jérémie