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.

Show comment
Hide comment
@gregstula

gregstula Mar 22, 2017

Thank you for this!

gregstula commented Mar 22, 2017

Thank you for this!

@GBH

This comment has been minimized.

Show comment
Hide comment
@GBH

GBH 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

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.

Show comment
Hide comment
@johannesE

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

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.

Show comment
Hide comment
@futhr

futhr Mar 30, 2017

Note: sass precision: 8 goes outside options.

futhr commented Mar 30, 2017

Note: sass precision: 8 goes outside options.

@jaysoifer

This comment has been minimized.

Show comment
Hide comment
@jaysoifer

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

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.

Show comment
Hide comment
@abitdodgy

abitdodgy Apr 7, 2017

@jaysoifer did you figure out what the problem was?

abitdodgy commented Apr 7, 2017

@jaysoifer did you figure out what the problem was?

@mbenatti

This comment has been minimized.

Show comment
Hide comment
@mbenatti

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.

Show comment
Hide comment
@josephan

josephan May 17, 2017

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

josephan commented May 17, 2017

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

@hubertpompecki

This comment has been minimized.

Show comment
Hide comment
@hubertpompecki

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

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.

Show comment
Hide comment
@gbih

gbih Jun 30, 2017

Cheers, this saved me quite a bit of time!

gbih commented Jun 30, 2017

Cheers, this saved me quite a bit of time!

@mbenatti

This comment has been minimized.

Show comment
Hide comment

mbenatti commented Jan 2, 2018

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