Je vais vous expliquer comment installer Bootstrap dans Rails. La procédure est très simple, alors veuillez vous y référer! !! Il y a quatre étapes.
** 1. Installez Bootstrap 2. Création d'un fichier SCSS 3. Modifier le fichier JS 4. Redémarrer les rails (Puma) **
Lorsque vous utilisez Bootstrap avec Rails, il est courant d'installer à l'aide de gemmes. Bootstrap utilise jQuery en interne, donc installons-le également. Ajoutez ce qui suit à votre Gemfile et essayez d'exécuter l'installation du bundle.
Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
Terminal
% bundle install
** Ensuite, renommez application.css en nom de fichier application.scss. ** ** C'est parce que Bootstrap est écrit dans la notation "SCSS" et est également utilisé dans Rails. «SCSS» est une notation qui étend le CSS et est une notation largement utilisée dans l'industrie Web actuelle. Je ne vais pas l'expliquer en détail ici, mais pensez-y comme une notation plus facile à lire et à écrire que la description CSS.
Changer l'extension de fichier
Avant de changer d'application/assets/stylesheets/application.css
Après le changement d'application/assets/stylesheets/application.scss
Après avoir renommé le fichier, ouvrez le fichier. *** = require_tree. Et * = require_self sont supprimés et Ajoutez @import "bootstrap";. ** ** Le code ajouté sera le paramètre de chargement de Bootstrap.
app/assets/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .<(Supprimé)
*= require_soi <(supprimé)
*/
@import "bootstrap";<(Ajout)
Défini pour lire les fichiers associés tels que «JavaScript» et «jQuery» utilisés dans Bootstrap. Ouvrez app / assets / javascripts / application.js et ajoutez-le au-dessus du code d'origine en vous référant à ce qui suit.
app/assets/javascripts/application.js
#Ajout des trois suivants
//= require jquery3
//= require popper
//= require bootstrap
#Code d'origine
//= require rails-ujs
//= require activestorage
//= require turbolinks
Veuillez essayer d'y accéder une fois depuis votre navigateur. Si vous voyez une erreur à ce stade, redémarrez Rails (Puma). Si l'erreur persiste, la version de "node.js" est peut-être obsolète. Si vous avez construit des rails avec Docker, veuillez vérifier si le Dockerfile a les paramètres suivants.
Dockerfile
#Installez les packages requis pour Rails
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
&& apt-get install -y nodejs
#Dans la description du site officiel ci-dessous, node.La version de js est faible et le bootstrap ne peut pas être utilisé
# RUN apt-get update -qq && apt-get install -y nodejs
Vous pouvez trouver la procédure d'installation difficile, mais vous pouvez supprimer la description ou suivre la procédure décrite ici. C'est étonnamment facile car il vous suffit de le réécrire. Essayez-le! !!
Recommended Posts