Skip to content

Instantly share code, notes, and snippets.

@ciastek

ciastek/README

Forked from anonymous/README
Created Feb 23, 2016
Embed
What would you like to do?
Use bootstrap-sass npm package with Phoenix's brunch
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
$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
@import "bootstrap"; /* imports node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss */
exports.config = {
plugins: {
sass: {
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'
}
}
}
npm install --save bootstrap-sass sass-brunch jquery copycat-brunch
@mkasztelnik

This comment has been minimized.

Copy link

@mkasztelnik mkasztelnik commented Mar 3, 2016

sass plugin configuration misses options context while setting includePaths:

exports.config = {
  plugins: {
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"],
      }
      precision: 8
    }
  }
}
@lessless

This comment has been minimized.

Copy link

@lessless lessless commented Mar 6, 2016

@ciastek what Phoenix version did you use - the sass is not concatenated in the v 1.1.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment