Discussion :

[Charvalos]

Bonjour à tous !

J'essaie actuellement Symfony sous sa version 4 et j'aimerais également ajouter Bootstrap. Malheureusement, j'ai beau chercher sur Internet mais soit je ne trouve rien soit je trouve différentes choses.

J'ai suivi la doc et tout fonctionne mais ensuite, comment faire pour l'intégrer à un template ?

Sur le coup, je suis un peu perdu d'autant plus que la documentation n'aide pas vraiment.

Pour le moment, j'ai un :

- assets
- css/global.scss
- js/main.js

et dans le dossier node_modules, j'ai bien un dossier bootstrap-sass.

Merci d'avance pour explications !

[armel18]

bonjour,

quelques indications pour configurer Encore/Webpack(webpack.config.js).
il s'agit de renseigner les fichiers (js,scss,css...) en entrée via la méthode addEntry() et indiquer le répertoire public via la méthode setOutputPath('public/build/') destiné à contenir ces fichiers css, js qui seront appelés dans le template

[Charvalos]

Cela à l'air de fonctionner mais j'ai remarqué que c'était pour la version 3.x de Bootstrap. Il y a moyen d'avoir la dernière version de Bootstrap ?

[armel18]

bootstrap 4 (en version stable) n'est pas encore dans les packages npm. Pour l'installer il faut prendre la version beta:

Code :

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

1
2
 
npm install bootstrap@4.0.0-beta.3

bootstrap scss 4 se trouve dans le dossier node_modules/bootstrap/scss/bootstrap.Pour l'importer depuis un fichier scss:

Code :

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

1
2
 
@import '~bootstrap/scss/bootstrap';

[Charvalos]

Merci de ta réponse.

J'utilise Composer et je l'ai donc installé via la fonction indiqué.

J'ai ensuite indiqué dans app.scss :

Code :

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

@import '~vendors/twbs/bootstrap/scss';

et dans app.js :

Code :

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

require('vendors/twbs/bootstrap/scss');

J'ai également fait la même chose pour JQuery mais quand je lance la commande yarn run encore dev, il me dit qu'il ne trouve pas les dépendances.

J'avoue que je suis un peu perdu et la doc n'aide vraiment pas, je trouve.

[armel18]

la compilation des fichiers scss|sass avec node exige le module node-sass. Webpack/Encore a besoin du loader sass-loader qui va rechercher tous les fichiers scss|sass de ton projet. si tu n'as pas ces 2 modules, il faut les installer:

Code :

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

1
2
 
yarn add -D node-sass sass-loader

[Charvalos]

J'ai bien installé les deux modules mais j'ai toujours les deux dépendances non-trouvés, au moment de la compilation en sachant que j'ai Bootstrap qui se trouve dans le dossier vendor/twbs et JQuery qui se trouve dans le dossier vendor/components

[armel18]

J'ai bien installé les deux modules mais j'ai toujours les deux dépendances non-trouvés, au moment de la compilation en sachant que j'ai Bootstrap qui se trouve dans le dossier vendor/twbs et JQuery qui se trouve dans le dossier vendor/components

tes dépendances ne se trouvent pas dans le dossier node_modules, il faut alors préciser le chemin relatif du fichier .
Donc si ton fichier bootstrap.scss se trouve dans vendors/twbs/bootstrap/scss/, pour l'inclure dans depuis un fichier sass(assets/global.scss):

Code :

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

1
2
3
4
 
//assets/.global.scss
 
@import "../vendors/twbs/bootstrap/scss/bootstrap"; //inclusion du fichier vendors/twbs/bootstrap/scss/bootstrap.scss

Après pour jquery c'est mieux de l'installer depuis npm et puis l'activer dans le fichier webpack.config.js

Code :

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

1
2
 
    .autoProvidejQuery()

[Charvalos]

Il y a du mieux mais toujours pas résolu.

L'erreur que j'ai, maintenant, c'est qu'il ne trouve le fichier ou il n'arrive pas à le lire.

J'ai essayé différents chemins mais sans succès.

Mon fichier app.scss se trouve dans assets/css, au cas où.

EDIT : Finalement, j'ai réussi à compiler mais le css ne semble pas être en pris en compte, après avoir rafraîchi la page.

Voilà ce que cela donne sur la page : <link rel="stylesheet" href="../vendor/twbs/bootstrap/dist/css/bootstrap.css" />

[armel18]

si le fichier app.scss se trouve dans assets/css/, pour l'inclure:

Code :

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

1
2
3
 
@import "../../vendors/twbs/bootstrap/scss/bootstrap"; //inclusion du fichier vendors/twbs/bootstrap/scss/bootstrap.scss
//il faut s'assurer que t'as bien le fichier vendors/twbs/bootstrap/scss/bootstrap.scss

pour jquery, avec yarn run add -D jquery, puis l'activer dans le fichier webpack.config.js
--------------------------------------------------------------------------------

De manière générale, pour gérer facilement les dépendances d'un projet sans se préoccuper des chemins, c'est d'installer ces dépendances via npm (ou yarn) et non via composer. En les installant avec npm, node les trouvera facilement dans le dossier node_modules. En utilisant yarn pour gérer les dépendances:

Code :

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

1
2
3
4
 
yarn add -D bootstrap jquery
 
//bootstrap4 est maintenant en version stable à  l'heure actuelle(plus besoin de préciser la version bêta)

dans ce dernier cas, appeler bootstrap depuis assets/css/app.css:

Code :

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

1
2
 
@import '~bootstrap/scss/bootstrap'; // import du fichier node_modules/bootstrap/scss/bootstrap.scss

exemple de projet symfony4/Encore avec bt4 :symfony/demo
tu peux cloner ce projet puis tester

[Charvalos]

J'avais essayé mais cela ne fonctionnait. Ce que je trouve "bizarre", c'est que la doc Bootstrap ne mentionne pas du tout l'ajout avec yarn.

Petite question en passant : le fameux require JQuery et Bootstrap, dans le fichier js, c'est encore nécessaire ou pas ?

[armel18]

J'avais essayé mais cela ne fonctionnait. Ce que je trouve "bizarre", c'est que la doc Bootstrap ne mentionne pas du tout l'ajout avec yarn.

yarn comme npm utilise le même dépôt pour récupérer les paquets. Donc utiliser l'un ou l'autre pour installer un paquet ne change absolument rien.
- Avec yarn:

Code :

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

1
2
3
4
 
  yarn init   #initialise le projet et crée le fichier package.json qui contient les dépendances (à faire qu'une fois en début de projet)
  yarn add @symfony/webpack-encore -D # install de webpack-encore
  yarn add -D bootstrap jquery   #ajoute les dépendances bootstrap et jquery dans le package.json et les installe dans node_modules/

-Avec npm:

Code :

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

1
2
3
4
 
 npm init #initialise le projet et crée le fichier package.json qui contient les dépendances (à faire qu'une fois en début de projet)
 npm i --save-dev @symfony/webpack-encore # install de webpack-encore
 npm i --save-dev bootstrap jquery   #ajoute les dépendances bootstrap et jquery dans le package.json et les installe dans node_modules/

Petite question en passant : le fameux require JQuery et Bootstrap, dans le fichier js, c'est encore nécessaire ou pas ?

Pour jquery t'as pas besoin d'un require, il faut juste l'activer dans le fichier webpack.config.js
Pour bootstrap il faut absolument l'inclure.
l'appli demo des contributeurs sf4 est assez explicite(symfony/demo), tu peux la cloner et faire des petits tests

[Charvalos]

Me voici de retour. ^^

J'ai réussi à ajouter Bootstrap via yarn ainsi que JQuery et la compilation s'est effectuée avec succès. Le problème est que le css ne semble pas pris en compte sur la page WEB car rien ne change.

Voici le contenu de mes fichiers :

app.scss

Code :

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

1
2
3
$fa-font-path: "~font-awesome/fonts";
 
@import '~bootstrap/scss/bootstrap';

app.js

Code :

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

require('bootstrap');

Et le lien que j'ai dans mon template de base est :

Code :

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

1
2
3
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('css/app.css') }}" />
        {% endblock %}

J'ai également bien rajouter la fonction asset via composer.

EDIT : Autant pour moi, cela fonctionne ! Je m'étais trompé dans les chemins où il fallait mettre build/css/app.css.