Just a short instruction. Maybe it will help somebody.
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
Install boostrap with deps and Sass:
npm install jquery --save-dev
npm install tether --save-dev
npm install email@example.com --save-dev
npm install popper.js --save-dev
npm install sass-brunch --save-dev
Delete old boostrap:
Switch css to scss:
mv css/app.css css/app.css.scss
after: ["web/static/css/app.css"] // concat app.css last
// Do not use ES6 compiler in vendor code
includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
precision: 8 // Minimum precision required by bootstrap-sass
Thanks for sharing. I spent quite a while trying to figure out why my app.scss was being ignored. It seems that it had to be named app.css.scss for sass-brunch to pick it up.
Bootstrap 4 was released, so we can now use it:
npm install firstname.lastname@example.org --save-dev
Thank you so much for the post! Working for me.
Thanks for this, very useful!
Just a quick note, if you use email@example.com instead of beta-2, I don’t think you need tether anymore
Related: there is a new version of
webpack which is supposed to reduce configuration overhead. It would be great if there were a simple/fast way to spin up a sample Phoenix app with an alternate JS config…
mix phx.new has a
--no-brunch option. Is there a way to plug in a custom JS generator, one that spits out the right package definitions and configs for a given JS environment??
Sure, you can define your own new project templates and package them up in to their own runners.