Je voulais pouvoir utiliser jQuery et Bootstrap lors de la création d'une application avec Ruby on Rails, alors prenez note de la procédure. (Utilisation de Webpacker.)
Introduction de jQuery, Bootstrap, popper.js (utilisé par Bootstrap) dans __1.yarn. __
Exécutez ce qui suit dans le répertoire de l'application.
yarn add jquery bootstrap popper.js
__2. Paramètres webpack __ Ajoutez la description de environment.js dans app / config / webpack. (Cela vous permet d'utiliser $ et Bootstrap Javascript sans importer ni exiger.)
environment.js
const { environment } = require('@rails/webpacker');
//d'ici
const webpack = require('webpack');
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
);
//Ajouté jusqu'à présent.
module.exports = environment
__3. Importez le JS et le CSS de Bootstrap __ Importez le JS de Bootstrap avec application.js dans app / javascript / packs. Créez application.scss dans app / javascript / stylesheets et importez le CSS Bootstrap.
application.js
import 'bootstrap';
import '../stylesheets/application';
application.scss
@import '~bootstrap/scss/bootstrap';
__4. Charger JS et CSS créés par Webpacker depuis le côté application __ Ajoutez les deux phrases suivantes dans la tête de app / views / layouts / application.html.erb.
erb:application.html.erb
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
C'est ça.
Recommended Posts