* ###### Tested with Phoenix 1.3

## 1) Installing sass, font-awesome and bootstrap package's using Brunch

First, install the Sass, Font Awesome, bootstrap(and deps) package:

`cd assets`

- npm install --save-dev sass-brunch
- npm install --save font-awesome
- npm install --save copycat-brunch
- npm install --save jquery
- npm install --save bootstrap
- npm install --save tether (bootstrap dep)
- npm install --save popper.js (bootstrap dep)

## 2) Create folder fonts assets (because brunch will search and copy this folder)

- You must create a folder `fonts` in path "assets/static" (`assets/static/fonts`)
- cd assets/static
- mkdir fonts
- cd fonts
- touch .gitkeep (you must create this to persist in git repo)

In the end you will have a folder like `/assets/static/fonts` containing the fonts

## 3) Update brunch-config.js (look the brunch-config.js attached)
- Add saas config and copycat:

   ```
   sass: {
     mode: 'native',
     options: {
       includePaths: ["node_modules/font-awesome/scss", "node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
       precision: 8 // Minimum precision required by bootstrap-sass
      }
    },
    copycat: {
      "fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
      verbose : false, //shows each file that is copied to the destination directory
      onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
    }
   ```

- Add "scss", "fonts" to your paths/watcher


   ```
   paths: {
     // Dependencies and current project directories to watch
     watched: ["static", "css", "js", "vendor","scss", "fonts"],
     // Where to compile files to
     public: "../priv/static"
   }
   ```
- Update npm config

  ```
  npm: {
    enabled: true,
    globals: { // Bootstrap's JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      Popper: 'popper.js',
      bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
    }
  }
  ```

## 4) Rename web/static/css/app.css to web/static/css/app.sass and add @import (look file attached)

- add `@import 'font-awesome';`
- add `@import 'bootstrap';`