Sass Bootstrap 4 in Phoenix 1.3

Add dependencies to assets/package.json

• Add font-awesome, bootstrap, jquery to dependencies
• Add sass-brunch and copycat-brunch to devDependencies

...
  "dependencies": {
   "phoenix": "file:../deps/phoenix",
   "bootstrap": "4.0.0",
   "font-awesome": "4.7.0",
   "popper.js": "1.12.9",
   "jquery": "3.3.1"
  },
  "devDependencies": {
   "babel-brunch": "6.1.1",
   "brunch": "2.10.9",
   "clean-css-brunch": "2.10.0",
   "uglify-js-brunch": "2.10.0",
   "sass-brunch": "2.10.4",
   "copycat-brunch": "1.0.9"
  }
...

Change the app.css to app.scss

• Delete assets/css/app.css
• Add assets/css/app.scss
• Include font-awesome and bootstrap

$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
@import "font-awesome";
@import "bootstrap";

...
// Overrides

Watch for changes in config/dev.exs

Add scss to the patterns config

  ...
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|scss|css|png|jpeg|jpg|gif|svg)$},
  ...

Update brunch-config.js

1. We need to make sure app.scss loads last
2. Add copycat config for the font-awesome fonts
3. Configure scss to include bootstrap and font-awesome
4. Add $, jQuery, and bootstrap to the globals

    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["../priv/static/css/app.scss"]
      }
    },
  ...
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    copycat:{
      "fonts" : ["node_modules/font-awesome/fonts"],
      onlyChanged: true
    },
    sass: {
      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,
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap' // require bootstrap-sass' JavaScript globally
    }
  ...

I think that's it. Might have to cd assets && npm install and restart Phoenix.