Versions
Instructions
Install npm packages
npm install --save-dev sass-brunch
npm install --save [email protected]
Update brunch-config.js
Rename web/static/css/app.css to web/static/css/app.scss
Update web/static/css/app.scss
| @import "bootstrap"; |
| exports.config = { | |
| // See http://brunch.io/#documentation for docs. | |
| files: { | |
| javascripts: { | |
| joinTo: "js/app.js" | |
| // To use a separate vendor.js bundle, specify two files path | |
| // http://brunch.io/docs/config#-files- | |
| // joinTo: { | |
| // "js/app.js": /^(web\/static\/js)/, | |
| // "js/vendor.js": /^(web\/static\/vendor)|(deps)/ | |
| // } | |
| // | |
| // To change the order of concatenation of files, explicitly mention here | |
| // order: { | |
| // before: [ | |
| // "web/static/vendor/js/jquery-2.1.1.js", | |
| // "web/static/vendor/js/bootstrap.min.js" | |
| // ] | |
| // } | |
| }, | |
| stylesheets: { | |
| joinTo: "css/app.css", | |
| order: { | |
| after: ["web/static/css/app.css"] // concat app.css last | |
| } | |
| }, | |
| templates: { | |
| joinTo: "js/app.js" | |
| } | |
| }, | |
| conventions: { | |
| // This option sets where we should place non-css and non-js assets in. | |
| // By default, we set this to "/web/static/assets". Files in this directory | |
| // will be copied to `paths.public`, which is "priv/static" by default. | |
| 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" | |
| }, | |
| // Configure your plugins | |
| plugins: { | |
| babel: { | |
| // Do not use ES6 compiler in vendor code | |
| ignore: [/web\/static\/vendor/] | |
| }, | |
| sass: { | |
| options: { | |
| includePaths: ["node_modules/bootstrap/scss"], // 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's JavaScript requires both '$' and 'jQuery' in global scope | |
| $: 'jquery', | |
| jQuery: 'jquery', | |
| bootstrap: 'bootstrap' // Require Bootstrap's JavaScript globally | |
| } | |
| } | |
| }; |
Cheers, this saved me quite a bit of time!