Instantly share code, notes, and snippets.

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

Versions

  • Bootstrap 4 Alpha 6
  • Phoenix 1.2.1

Instructions

  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 http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// 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: [
"web/static",
"test/static"
],
// 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
}
}
};
@gregstula

This comment has been minimized.

Copy link

gregstula commented Mar 22, 2017

Thank you for this!

@GBH

This comment has been minimized.

Copy link

GBH commented Mar 22, 2017

Google indexes these things fast. Got it working on my project. Still bitching about Error: Bootstrap tooltips require Tether (http://tether.io/) 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

@johannesE

This comment has been minimized.

Copy link

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'.

@futhr

This comment has been minimized.

Copy link

futhr commented Mar 30, 2017

Note: sass precision: 8 goes outside options.

@jaysoifer

This comment has been minimized.

Copy link

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...

@abitdodgy

This comment has been minimized.

Copy link

abitdodgy commented Apr 7, 2017

@jaysoifer did you figure out what the problem was?

@mbenatti

This comment has been minimized.

Copy link

mbenatti commented Apr 10, 2017

Awesome!
I create a gist for font-awesome:
https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83

@josephan

This comment has been minimized.

Copy link

josephan commented May 17, 2017

Thank you for this guide. It also works with http://bulma.io/

@hubertpompecki

This comment has been minimized.

Copy link

hubertpompecki commented Jun 25, 2017

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

@gbih

This comment has been minimized.

Copy link

gbih commented Jun 30, 2017

Cheers, this saved me quite a bit of time!

@mbenatti

This comment has been minimized.

Copy link

mbenatti commented Jan 2, 2018

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