Phoenix Framework v1.3: Brunch Install Bootstrap 4.0.0-beta with Font-Awesome

gistfile1.md

Install Dependencies

npm install --save jquery popper.js tether [email protected] font-awesome // popper.js for bootstrap 4 dependency

Copy font-awesome fonts to assets/static/fonts folder

cp -r assets/node_modules/font-awesome/fonts to assets/static

Configure Dependencies in brunch-config.js file

     },
     stylesheets: {
-      joinTo: "css/app.css"
+      joinTo: "css/app.css",
+      order: {
+        after: ["css/app.css"] // concat app.css last
+      }
     },
     templates: {
       joinTo: "js/app.js"
........
      ignore: [/vendor/]
     },
     sass: {
-      native: true
+      native: true,
+      options: {
+        includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to @import
+        precision: 8 // Minimum precision required by bootstrap-sass
+      }
     }
.........
   npm: {
-    enabled: true
+    enabled: true,
+    globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope
+      $: 'jquery',
+      jQuery: 'jquery',
+      Tether: 'tether',
+      Popper: "popper.js",
+      bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
+    }
   }

REFs:

https://stackoverflow.com/questions/45946399/installing-bootstrap-4-beta-using-npm

https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83

https://gist.github.com/eproxus/545618f91983ff302a0a734888e7d01c

http://terrcin.io/2017/04/16/phoenix-1.3-with_bootstrap_4_and_font_awesome/

https://medium.com/@b1ackmartian/using-bootstrap-and-sass-with-phoenix-framework-and-brunch-6568e7a66ca9