Bootstrap 4 et Font Awesome 5 dans Rails 6

Comment intégrer Bootstrap 4 et Font Awesome 5 dans Rails 6

Partagez sur:

Dans ce tutoriel, vous verrez étape par étape comment intégrer bootstrap 4 et Font awesome 5 dans Rails 6.

Rails 6 est sorti depuis quelques années maintenant, Mais je l’avais pas encore encore utilisé, car beaucoup de mes projets sont fait en Rails 5 et je voulais pas migrer vers Rails 6.

Lire aussi: Comment installer Ruby On Rails sur Ubuntu 18.04

Tout récemment j’ai voulais faire un nouveau projet, tout naturellement, j’ai voulu essaye Rails 6.

Mais j’ai vite découvert que beaucoup de chose ont changé et que je ne pouvais pas utiliser la même manière pour intégrer Bootstrap 4 et Font Awesome 5 dans Rails 5 dans mon nouveau projet.

Parce que dans Rails 6, il commence à utiliser « webpack » comme compilateur Javascript par défaut.

Après quelques essais et erreurs, je trouve enfin un moyen de les faire fonctionner ensemble, laissez-moi le partager ici, j’espère que cela pourra vous aider !

 

Alors qu’est-ce qui a changé dans Rails 6?

Premièrement, Javascripts passe de app/assets/javascript à app/javascript.

Deuxièmement, le chemin de référence Javascripts dans application.html.erb est passé de javascript_include_tag à javascript_pack_tag.

PS : dans les coulisses, car dans Rails 6, ils commencent à utiliser webpack comme moteur de compilation javascript par défaut.

 

Intégrer Bootstrap 4 et Font Awesome 5 dans Rails 6

Pour ce faire, on commence par ajouter le gem bootstrap 4, comme on a habitude de la faire.

Ajoutez la ligne suivante dans votre Gemfile.

# Gemfile 
gem 'bootstrap', '~>4.3.1'

 

Enregistrez le fichier et exécutez la commande bundle install pour lancer l’installation du gem.

Renommez app/assets/stylesheets/applications.css en app/assets/stylesheets/applications.scss .

Ajoutez la ligne suivante dans le fichier.

// app/assets/stylesheets/application.scss

@import "bootstrap";

À ce stade, vous constaterez peut-être que la police de votre page Web a été modifiée et qu’une classe d’amorçage fonctionne peut-être.

Mais si vous voulez que toutes les fonctionnalités fonctionnent dans bootstrap 4 (pour autant que je sache, certains composants de bootstrap 4 nécessitent javascript pour fonctionner, tels que l’info-bulle, le modal ou les popovers), vous devrez peut-être intégrer jquery, popper.js et bootstrap livrés avec les fichiers javascript de bootstrap.

 

Lire aussi: Comment générer des fichiers PDF avec Ruby on Rails

 

Cependant, c’est exactement ce qui ne fonctionne pas en se référant à la documentation de bootstrap.

En outre, Rails 6 utilise toujours le fichier application.scss de app/assets/stylesheets par défaut, qui n’utilise pas la puissance de webpack.

Donc, si vous souhaitez également intégrer Sass à webpack, vous pouvez suivre les étapes ci-dessous. Sinon, vous pouvez les ignorer et passer à la section du fil.

 

    1. Déplacer Sass vers le Webpack

Tout d’abord, créez le dossier suivant app/javascript/stylesheets/ et placez le fichier application.scss dans ce dossier (ajoutez la ligne suivante si vous créez un nouveau fichier)

// app/javascript/stylesheets/application.scss

@import "bootstrap";

 

Deuxièmement, modifiez le lien de référence dans le fichier application.html.erb de stylesheet_link_tag en stylesheet_pack_tag.

<%# app/views/layouts/application.html.erb %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Mais Sass ne fonctionnerait pas encore, passons à la partie suivante.

    1. Ajouter bootstrap, jquery, popper.js

Cette partie est recommandée par la plupart des sources que j’ai pu trouver lors de mes recherches, donc je pense qu’il vaut mieux suivre leurs conseils maintenant. exécutez la ligne suivante dans votre terminal.

yarn add bootstrap jquery popper.js

 

Après avoir correctement installé les packages, mettez à jour le fichier de configuration de webpack comme suit.

// config/webpack/environment.js
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.append('Provide',new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery',Popper: ['popper.js', 'default']}));
module.exports = environment;

 

Ensuite, ajoutez les lignes suivantes à app/javascript/packs/application.js .



// app/javascript/packs/application.js

import "bootstrap";

import "../stylesheets/application";


Après avoir suivi les étapes ci-dessus, la structure de dossiers de app/javascript doit être similaire à la structure de dossiers suivante.




Enfin, votre fichier app/javascript/stylesheets/application.scss devrait ressembler à ce qui suit, faites attention à l’ordre d’importation car, dans le monde CSS, c’est important.


// app/javascript/stylesheets/application.scss

@import "bootstrap_custom"; //bootstrap custom variables put here
@import "bootstrap";
@import "styles"; // self-define class and styles put here


 


Pour plus d’informations sur la personnalisation de bootstrap, veuillez vous référer à la documentation de bootstrap et à la liste des variables à partir desquelles vous pouvez modifier.


Ajouter des fichiers Javascript personnalisés


Comme je l’ai mentionné ci-dessus, il existe des composants dans bootstrap 4 qui nécessitent javascript pour fonctionner, non seulement en important toutes les bibliothèques js ci-dessus, mais également du code personnalisé.


Vous pouvez probablement mettre tous ces codes dans app/javascript/packs/application.js , mais la meilleure pratique consiste à les ajouter dans custom.js dans le même dossier que application.js , et à le renvoyer dans application.js.




// app/javascript/packs/custom.js

$(function() {

  $('[data-toggle="tooltip"]').tooltip();


});$(function() {
  $('[data-toggle="popover"]').popover();
});

// app/javascript/packs/application.js
import "bootstrap";
import "../stylesheets/application";
import "./custom";






A présent, bootstrap 4 devrait être entièrement intégré à votre projet, testez-le pour voir s’il fonctionne, faites-moi savoir si vous trouvez des bogues ou des erreurs dans mes étapes, merci !


Intégrer Font Awesome dans Rails 6


Passons maintenant à l’intégration de Font Awesome 5 (il existe en fait des joyaux, comme celui-ci ou celui-ci, mais ils utilisent toujours Font Awesome 4 ou ne fonctionnent pas avec Rails 6).


Tout d’abord, utilisez yarn pour ajouter la dernière bibliothèque Font Awesome Free dans votre projet.


yarn add @fortawesome/fontawesome-free




Deuxièmement, ajoutez la ligne suivante dans les fichiers application.scss et application.js.


// app/javascript/stylesheets/application.scss
@import '@fortawesome/fontawesome-free';
// app/javascript/packs/application.js
import "@fortawesome/fontawesome-free/js/all";


Donc maintenant, Font Awesome 5 devrait être intégré à votre projet, vous pouvez intégrer l’icône en insérant du code comme celui-ci :


<i class="fab fa-facebook-f fa-3x mx-2"></i>




Si vous souhaitez intégrer Font Awesome dans votre code erb rails, vous devrez peut-être toujours ajouter la gemme suivante dans votre projet.


# Gemfile

gem 'font_awesome5_rails'


Alors maintenant, vous pouvez commencer à utiliser le code ruby comme suit pour décorer votre page Web.


<%= fa_icon "baby", text: "BB", class: 'mx-2', size: '3x' %>




Conclusion


Dans ce tutoriel, nous avons vu étape par étape comment intégrer bootstrap 4 et Font awesome 5 dans Rails 6.



Partagez sur: