Use bootstrap-sass npm package with Phoenix's brunch

README.md

1. install npm packages
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

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 = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.scss"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    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"
  },
  
  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    },
    copycat: {
      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/
    },
    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 
      }
    }
  },
  
  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },
  
  npm: {
    enabled: true,
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap-sass' // require bootstrap-sass' JavaScript globally
    }
  }
}

install-npm-packages.sh

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

Updates:

1. Latest brunch doesn't need whitelist, https://github.com/brunch/brunch/blob/master/CHANGELOG.md#brunch-22-jan-22-2016
2. Include bootstrap globally as example, otherwise brunch doesn't require it, https://elixirforum.com/t/bootstrap-show-hide-operations-do-nothing-in-phoenix-app/1212/2

Thanks. Works perfectly !!

thanks!

Thanks for this. I've been scratching my head on the least painful way to do this.