Create a gist now

Instantly share code, notes, and snippets.

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
}
}
};

Thank you for this!

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

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 commented Mar 30, 2017

Note: sass precision: 8 goes outside options.

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

@jaysoifer did you figure out what the problem was?

mbenatti commented Apr 10, 2017

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

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

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

gbih commented Jun 30, 2017

Cheers, this saved me quite a bit of time!

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