Include Webpack and use it for jQuery, Bootstrap and chosen.js

app/assets/javascripts/application.js

@@ -10,10 +10,9 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require bootstrap_pagedown
+//= require pagedown_bootstrap
 //= require d3
 //
 // lib/assets
@@ -24,8 +23,6 @@
 //= require ace/ace
 //= require ace/ext-language_tools
 //= require jstree/jstree.min
-//= require bootstrap.min
-//= require chosen.jquery.min
 //= require jquery-ui.min
 //= require underscore.min
 //= require_tree .

app/assets/stylesheets/application.css

@@ -10,14 +10,12 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require bootstrap_pagedown
+ *= require pagedown_bootstrap
  *
  * lib/assets
  *= require flash
  *
  * vendor/assets
- *= require bootstrap.min
- *= require chosen.min
  *= require font-awesome.min
  *= require google_opensans
  *= require jquery-ui.min

app/javascript/packs/application.js

@@ -0,0 +1,16 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.slim
+
+// JS
+import 'jquery'
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+import 'chosen-js/chosen.jquery';
+
+// CSS
+import 'chosen-js/chosen.css';

app/javascript/packs/stylesheets.scss

@@ -0,0 +1,12 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= stylesheet_pack_tag 'stylesheets' %> to the appropriate
+// layout file, like app/views/layouts/application.html.slim
+
+@import '~bootswatch/dist/yeti/variables';
+@import '~bootstrap/scss/bootstrap';
+@import '~bootswatch/dist/yeti/bootswatch';

app/views/layouts/application.html.slim

@@ -5,8 +5,11 @@ html lang='en'
     meta name='viewport' content='width=device-width, initial-scale=1'
     title = application_name
     link href=asset_path('favicon.png') rel='icon' type='image/png'
-    = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track' => true)
-    = javascript_include_tag('application', 'data-turbolinks-track' => true)
+    = stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true)
+    = stylesheet_pack_tag('stylesheets', media: 'all', 'data-turbolinks-track': true)
+    = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track': true)
+    = javascript_pack_tag('application', 'data-turbolinks-track': true)
+    = javascript_include_tag('application', 'data-turbolinks-track': true)
     = yield(:head)
     = csrf_meta_tags
   body