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.

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.

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.

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.

Owner

mbenatti commented Jan 2, 2018

Updated with bootstrap, copycat and font-awesome

@mihai-ciupina

This comment has been minimized.

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.

Owner

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.

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