-
-
Save scrogson/e72f40c3c8e83c16c4b8 to your computer and use it in GitHub Desktop.
| 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: { | |
| 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' | |
| } | |
| } | |
| } |
| 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.
Can I ask what version of brunch did you have this working with? I'm trying to accomplish the same thing but to no avail. Right now I have all the asset files I need copied into web/static/vendor, which works but feels wrong.