Accueil Blog A propos Contact Connexion
Retour à la liste des articles Ajouter Select2 (Jquery) à Symfony 5 avec Webpack Encore

Ajouter Select2 (Jquery) à Symfony 5 avec Webpack Encore

Olivier Prieur | il y a 3 ans | il y a 7 jours Développement web | 2 | 4645

### Symfony ###

$ symfony new monprojet --full --version=lts

### NodeJS ###

$ sudo apt install nodejs

Sous Ubuntu 21.10 : NodeJS v17.1.0

### Nvm ###

Un petit utilitaire hyper pratique poir chnager de version de NodeJS à la volée : NVM

$ sudo apt install curl

$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

$ source ~/.profile


On installe la dernière version de NodeJS :

$ nvm install node

Si vous voulez instgaller une version 16 de NodeJS :

$ nvm install 16

Si vous voulez utiliser la version 16 de NodeJS :

$ nvm use 16

 Now using node v16.4.2 (npm v7.18.1)

### Webpack-Encore ###

$ composer require symfony/webpack-encore-bundle

$ yarn install


Renommer le fichier /assets/styles/app.css en app.scss

 Modifier le fichier /assets/app.js :

../..

 import './styles/app.scss';

 ../..

Décommenter

.enableSassLoader()

dans le fichier webpack.config.js (fichier à la racine du projet)

$ yarn add sass-loader node-sass --save-dev

Vérifiez bien que le fichier /templates/base.html.twig possède les lignes adéquates pour "appeler" Webpack :

{% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}

et

{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}

Première compilation :

$ yarn encore dev-server

On installe PostCSS :

$ yarn add postcss-loader autoprefixer --dev

On crée un fichier postcss.config.js à la racine du projet avec :

module.exports = {

     plugins: {

         autoprefixer: {}

     }

 }


### BOOTSTRAP ###

On installe Bootstrap 5 :

$ yarn add bootstrap @popperjs/core

Puis on modifie le fichier /assets/app.js :

import { Tooltip, Toast, Popover } from 'bootstrap';

Fichier custom.css :

On crée un  fichier custom.css dans /assets/style qui servira à y déposer notre CSS perso.

Puis on importe tout ça dans /assets/styles/app.scss (on efface les 2 ou 3 lignes de CSS et on met le code suivant à la place) :

@import "custom";

@import "~bootstrap/scss/bootstrap";


Et on recompile :

$ yarn encore dev-server

Si vous n'avez pas d'erreur de compilation, Boostrap devrait être installé !

### SELECT2 ET JQUERY ###

On installe Jquery et Select2 :

$ yarn add jquery

$ yarn add select2


On "importe" Selerct2 dans le fichier assets/styles/app.scss :

@import "~select2/dist/css/select2.css";

On importe déclare Jquery et Select2 dans le fichier assets/app.app.js :

import $ from 'jquery';

require('select2')

$('select').select2();


Ici on vient d'appliquer Select2 à la balise <select> de tous les fichiers du site.

Et voila !

Olivier Prieur

Olivier Prieur

Geek quinqua nivernais fan d'ovalie, de musique, de linuxeries et de Net.
Portfolio : https://www.olivierprieur.fr

Commentaires

En soumettant ce formulaire, j’accepte que ce site conserve mes données personnelles via ce formulaire. Aucune exploitation commerciale ne sera faite des données conservées.

Birzat

il y a 2 ans

Bonjour,

Merci pour cet article :)

Petite question : dans votre exemple comment faire pour utiliser select2 dans un autre fichier js ?

Exemple : dans un fichier autre-fichier.js
$(document).ready(function() {
$('#exemple').select2()
});

En faisant cela, j'obtiens le message d'erreur :

"Uncaught TypeError: $(...).select2 is not a function"

Auriez-vous une idée ?

Merci d'avance.

citizenz7

il y a 2 ans

Vous pouvez placer la déclaration d'import de Select2 dans un autre fichier JS (exemple : select2.js) mais vous devez le déclarer dans webpack.config.js au niveau des addEntry : .addEntry('select', './assets/select2.js').

A la une

Utiliser TailwindCSS dans un projet Symfony 7

Lire l'article

Symfony 7 avec Docker

Lire l'article

Customiser Easyadmin (2) : avec AssetMapper

Lire l'article

Je recherche un nouveau job !

Lire l'article

Les plus lus

Symfony : barre de recherche dans la sidebar 19385

Lire l'article

Débuter avec Symfony 5 : le fichier .env 11930

Lire l'article

VSCode : 10 raccourcis clavier indispensables (Linux) 11595

Lire l'article

GIT / GITHUB : aide-mémoire pour "les nuls" 10191

Lire l'article