Ich wollte in der Lage sein, jQuery und Bootstrap beim Erstellen einer Anwendung mit Ruby on Rails zu verwenden. Notieren Sie sich daher die Vorgehensweise. (Verwenden von Webpacker.)
Einführung von jQuery, Bootstrap, popper.js (von Bootstrap verwendet) in __1.yarn. __ __
Führen Sie im Anwendungsverzeichnis Folgendes aus.
yarn add jquery bootstrap popper.js
__2. Webpack-Einstellungen __ Fügen Sie die Beschreibung von environment.js in app / config / webpack hinzu. (Auf diese Weise können Sie $ und Bootstrap Javascript ohne Import oder Bedarf verwenden.)
environment.js
const { environment } = require('@rails/webpacker');
//von hier
const webpack = require('webpack');
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
);
//Bisher hinzugefügt.
module.exports = environment
__3. Importieren Sie JS und CSS von Bootstrap __ Importieren Sie Bootstraps JS mit application.js in app / javascript / packs. Erstellen Sie application.scss in app / javascript / stylesheets und importieren Sie Bootstrap-CSS.
application.js
import 'bootstrap';
import '../stylesheets/application';
application.scss
@import '~bootstrap/scss/bootstrap';
__4. Laden Sie JS und CSS, die von Webpacker erstellt wurden, von der Anwendungsseite __ Fügen Sie die folgenden zwei Sätze im Kopf von app / views / layouts / application.html.erb hinzu.
erb:application.html.erb
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Das ist es.
Recommended Posts