Use bootstrap-sass npm package with Phoenix's brunch

README

1) install npm packages
2) update brunch-config.js
3) remove Bootstrap from web/static/css/app.css
4) rename web/static/css/app.css to web/static/css/app.scss
5) update web/static/css/app.scss

app.scss

$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
@import "bootstrap"; /* imports node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss */

brunch-config.js

exports.config = {
  plugins: {
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"], // tell sass-brunch where to look for files to @import
        precision: 8 // minimum precision required by bootstrap-sass
      }
    },
    copycat: {
      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/
    }
  },
  modules: {
    autoRequire: {
      "js/app.js": [
        "bootstrap-sass", // require bootstrap-sass' JavaScript globally
        "web/static/js/app"
      ]
    }
  },
  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap-sass"], // pull jquery and bootstrap-sass in as front-end assets
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery'
    }
  }
}

install-npm-packages.sh

npm install --save bootstrap-sass sass-brunch jquery copycat-brunch