Installing Bootstrap 4 + Font Awesome from NPM in Phoenix Framework using sass

0-font-awesome-bootstap-phoenix.md

• 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';

app.sass

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

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["css/app.sass"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

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

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      mode: 'native',
      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
      }
    },
    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)
    }
  },
  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },
  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
    }
  }
};

Great article, it worked, thanks.

Is the copying really necessary? "Copying assets". I know is not working without but it feels like the all settings is actually for not doing the manual work.

Thanks!
@mihai-ciupina if you would like to avoid manual copying you can use a plugin that does it for you - https://www.npmjs.com/package/copycat-brunch is the one that I use and it works great.

Hello, thanks for sharing this.

I think we would not need to import font-awesome full path in app.scss
Instead, just

@import 'font-awesome';

will be ok.

Cheers!

Updated with bootstrap, copycat and font-awesome

When I use "fonts" : ["static/fonts", I get this error:

15:20:09 - error: ENOENT: no such file or directory, lstat 'static/fonts'

Actually :) what is the porpose of step 2? I implemented but no files were copied. I think copycat copies directly from node_modules to priv, but no assets.

@mihai-ciupina, you need to create a file .gitkeep, to persist this folder into git.

Thank you for this!