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

I had to to adjust the sass plugin part to:

  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
        }
      }  

Forked and did a minor change, https://gist.github.com/raysegantii/c1bd7e2ba55413a0c130f7316b5c7a13#gistcomment-1856644

Fork for Bootstrap 4: https://gist.github.com/eproxus/545618f91983ff302a0a734888e7d01c

When I run this, I get an error telling me that the top-level object in brunch-config.js must have a property files. How are you guys getting this brunch-config.js to run without that?

At this link: http://brunch.io/docs/config#-files- I see the following text: Required, object: files configures handling of application files: which compiler would be used on which file, what name should output file have etc. Any paths specified here must be listed in paths.watched as described above, for building.