Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Installing Bootstrap 4 + Font Awesome from NPM in Phoenix Framework using sass
  • 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';
@import 'font-awesome';
@import 'bootstrap';
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
}
}
};
@mihai-ciupina

This comment has been minimized.

Copy link

@mihai-ciupina mihai-ciupina commented May 31, 2017

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.

@hubertpompecki

This comment has been minimized.

Copy link

@hubertpompecki hubertpompecki commented Jun 26, 2017

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.

@bobzhen

This comment has been minimized.

Copy link

@bobzhen bobzhen commented Sep 2, 2017

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!

@mbenatti

This comment has been minimized.

Copy link
Owner Author

@mbenatti mbenatti commented Jan 2, 2018

Updated with bootstrap, copycat and font-awesome

@mihai-ciupina

This comment has been minimized.

Copy link

@mihai-ciupina mihai-ciupina commented Feb 22, 2018

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.

@mbenatti

This comment has been minimized.

Copy link
Owner Author

@mbenatti mbenatti commented Feb 27, 2018

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

@coderberry

This comment has been minimized.

Copy link

@coderberry coderberry commented Feb 28, 2018

Thank you for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment