RobBikmansurov · October 24, 2020 05:37 · Dec 26, 2019 · Dec 26, 2019 · Dec 26, 2019
diff --git a/BootstrapToRails6.md b/BootstrapToRails6.md
@@ -2,7 +2,7 @@
 ### Step 1:
 Add bootstrap and its dependencies:
 ```
-yarn add bootstrap@4.3.1 jquery popper.js
+yarn add bootstrap jquery popper.js
 ```
 
 ### Step 2:
@@ -23,6 +23,7 @@ module.exports = environment
 ### Step 3: [Bootstrap JS]
 In app/javascript/packs/application.js import bootstrap by adding the following:
 ```
+# app/javascript/packs/application.js
 import 'bootstrap'
 ```
 Optionally, we can add some code to enable tooltips and popover:
@@ -44,6 +45,11 @@ Import bootstrap into that file:
 # app/javascript/stylesheets/application.scss
 @import "~bootstrap/scss/bootstrap";
 ```
+And import this file into the js manifest:
+```
+# app/javascript/packs/application.js
+import '../stylesheets/application'
+```
 
 ### Step 5:
 Tell _Rails_ to start using _Webpack_. To do that, open the `application.html.erb` file and make the following change to it.

diff --git a/Bootstrap to Rails 6 → BootstrapToRails6.md b/Bootstrap to Rails 6 → BootstrapToRails6.md
diff --git a/Bootstrap to Rails 6 b/Bootstrap to Rails 6
@@ -0,0 +1,72 @@
+
+### Step 1:
+Add bootstrap and its dependencies:
+```
+yarn add [email protected] jquery popper.js
+```
+
+### Step 2:
+in config/webpack/environment.js add the following:
+```
+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
+```
+
+### Step 3: [Bootstrap JS]
+In app/javascript/packs/application.js import bootstrap by adding the following:
+```
+import 'bootstrap'
+```
+Optionally, we can add some code to enable tooltips and popover:
+```
+document.addEventListener("turbolinks:load", () => {
+  $('[data-toggle="tooltip"]').tooltip();
+  $('[data-toggle="popover"]').popover()
+})
+```
+
+### Step 4: [Bootstrap CSS]
+Create a folder `stylesheets` under app/javascript. Inside it we will create the main `application.scss` file to store our css library imports:
+```
+mkdir app/javascript/stylesheets  
+touch app/javascript/stylesheets/application.scss
+```
+Import bootstrap into that file:
+```
+# app/javascript/stylesheets/application.scss
+@import "~bootstrap/scss/bootstrap";
+```
+
+### Step 5:
+Tell _Rails_ to start using _Webpack_. To do that, open the `application.html.erb` file and make the following change to it.
+```
+# app/views/layouts/application.html.erb
+<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>  
+<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+```
+We can still keep the asset pipeline working if we had old code depending on it:
+```
+<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>  
+<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+```
+
+### Step 6: [Optional]
+Include Asset Pipeline Into Webpack
+update config/webpacker.yml to be able to resolve assets stored in the app/assets folder.
+```
+resolved_paths: ['app/assets']
+```
+
+#### More detailed steps:
+[Tutorial 1](https://medium.com/@guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832)
+
+[Tutorial 2](https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails)
No results found