Boostrap 4 + Sass installation in Phoenix 1.3

Hi folks,

Just a short instruction. Maybe it will help somebody.

Install boostrap with deps and Sass:

cd assets

npm install jquery --save-dev
npm install tether --save-dev
npm install bootstrap@4.0.0-beta.2 --save-dev
npm install popper.js --save-dev
npm install sass-brunch --save-dev

Delete old boostrap:

rm css/phoenix.css

Switch css to scss:

mv css/app.css css/app.css.scss

Edit css/app.css.scss:

@import "bootstrap"; 

Edit js/app.js:

import "bootstrap";

Edit brunch-config:

  stylesheets: {
    joinTo: "css/app.css",
    order: {
      after: ["web/static/css/app.css"] // concat app.css last
    }

  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/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
      }
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      Popper: 'popper.js',
      Tether: 'tether',
      bootstrap: 'bootstrap'
    }
  }
23 Likes

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.

2 Likes

Bootstrap 4 was released, so we can now use it:

npm install bootstrap@4.0.0 --save-dev

3 Likes

Thank you so much for the post! Working for me.

2 Likes

Just a Addition to this topic,
months ago I wrote a tutorial: https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83

4 Likes

Thanks for this, very useful!

Just a quick note, if you use bootstrap@4.0.0 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…

Question: 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. :slight_smile: