Boostrap 4 + Sass installation in Phoenix 1.3

Hi folks,

Just a short instruction. Maybe it will help somebody.

Install boostrap with deps and Sass:

cd assets

npm install jquery --save-dev
npm install tether --save-dev
npm install bootstrap@4.0.0-beta.2 --save-dev
npm install popper.js --save-dev
npm install sass-brunch --save-dev

Delete old boostrap:

rm css/phoenix.css

Switch css to scss:

mv css/app.css css/app.css.scss

Edit css/app.css.scss:

@import "bootstrap"; 

Edit js/app.js:

import "bootstrap";

Edit brunch-config:

  stylesheets: {
    joinTo: "css/app.css",
    order: {
      after: ["web/static/css/app.css"] // concat app.css last
    }

  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      Popper: 'popper.js',
      Tether: 'tether',
      bootstrap: 'bootstrap'
    }
  }