Instantly share code, notes, and snippets.

What would you like to do?
Use Bootstrap 4 SASS with Phoenix


  • Bootstrap 4 Alpha 6
  • Phoenix 1.2.1


  1. Install npm packages

    npm install --save-dev sass-brunch
    npm install --save bootstrap@4.0.0-alpha.6
  2. Update brunch-config.js

  3. Rename web/static/css/app.css to web/static/css/app.scss

  4. Update web/static/css/app.scss

@import "bootstrap";
exports.config = {
// See for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// joinTo: {
// "js/app.js": /^(web\/static\/js)/,
// "js/vendor.js": /^(web\/static\/vendor)|(deps)/
// }
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "web/static/vendor/js/jquery-2.1.1.js",
// "web/static/vendor/js/bootstrap.min.js"
// ]
// }
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // 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 "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
// Where to compile files to
public: "priv/static"
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
sass: {
options: {
includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
precision: 8 // Minimum precision required by bootstrap-sass
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
npm: {
enabled: true,
globals: { // Bootstrap's JavaScript requires both '$' and 'jQuery' in global scope
$: 'jquery',
jQuery: 'jquery',
bootstrap: 'bootstrap' // Require Bootstrap's JavaScript globally

This comment has been minimized.

gregstula commented Mar 22, 2017

Thank you for this!


This comment has been minimized.

GBH commented Mar 22, 2017

Google indexes these things fast. Got it working on my project. Still bitching about Error: Bootstrap tooltips require Tether ( even though it's a declared dependency? Why doesn't it get loaded? I hate JS tooling.

Edit: Needed to add: Tether: 'tether' in npm.globals


This comment has been minimized.

johannesE commented Mar 26, 2017

Thank you! Worked with the fix from @GBH for me. Don't try to install it manually so that it appears in your package.json file. Just do exactly what he said and put Tether: 'tether' above bootstrap: 'bootstrap'.


This comment has been minimized.

futhr commented Mar 30, 2017

Note: sass precision: 8 goes outside options.


This comment has been minimized.

jaysoifer commented Apr 1, 2017

This is not working for me.
For some bizarre reason, everything seems to be working fine except that @import "bootstrap"; simply doesn't work: Bootstrap's regular code is just not loaded...


This comment has been minimized.

abitdodgy commented Apr 7, 2017

@jaysoifer did you figure out what the problem was?


This comment has been minimized.

mbenatti commented Apr 10, 2017

I create a gist for font-awesome:


This comment has been minimized.

josephan commented May 17, 2017

Thank you for this guide. It also works with


This comment has been minimized.

hubertpompecki commented Jun 25, 2017

Worked for me, although I found I needed @import "node_modules/bootstrap/scss/bootstrap"; instead of @import "bootstrap"; in app.scss.


This comment has been minimized.

gbih commented Jun 30, 2017

Cheers, this saved me quite a bit of time!


This comment has been minimized.

mbenatti commented Jan 2, 2018

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