| @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 | |
| } | |
| } | |
| }; |
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'.
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?
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.
Cheers, this saved me quite a bit of time!
Guys updated version here: https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83
Thank you for this!