How to get brunch & sass-brunch to compile / enable bootstrap.scss?

Question

I am new to brunches, but trying to configure it with sass-brunch and bootstrap-4.0.0-alpha.2 as modules installed in npm, I cannot get it to enable bootstrap.scss. Any ideas on what I'm doing wrong?

Here is a small example project .

My package.json:

{ "name": "simple-brunch", "version": "0.1.0", "private": true, "devDependencies": { "bootstrap": "^4.0.0-alpha.2", "brunch": "^2.5.3", "javascript-brunch": "^2.0.0", "sass-brunch": "^2.0.0" } } 

My brunch-config.js:

 module.exports = { config: { files: { javascripts: { joinTo: { 'vendor.js': /^(?!app)/, 'app.js': /^app/ } }, stylesheets: { joinTo: { 'vendor.css': /^(?!app)/, 'app.css': /^app/ } } }, npm: { styles: { bootstrap: ['scss/bootstrap.scss'] } } } } 

The output from brunch build -d given below. sass-brunch been used successfully to handle app/styles/main.scss - there is a brunch:pipeline line that shows it. However, while the few lines next to the top seem to indicate that they found and compiled the bootstrap.scss boot file, and the brunch:generate next to the bottom shows that it combines it into vendor.css , this file is empty except for a comment that points to vendor.css.map ( /*# sourceMappingURL=vendor.css.map*/ ), and this map contains only {"version":3,"sources":[],"names":[],"mappings":"","file":"public/vendor.css"} .

Things I tried that didn't work:

• Adding the plugins.sass.options.includePaths: ['node_modules/bootstrap/scss'] to brunch-config.js; no change in output.

• Adding the paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss'] parameter paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss'] in brunch-config.js - now it seems to find and scan all the files in this directory, but by - still does not send bootstrap.scss through the brunch pipeline to where sass -brunch may have a crack on it.

Here's the conclusion:

 brunch:config Trying to load brunch-config +0ms brunch:plugins Loaded plugins: javascript-brunch, sass-brunch +66ms brunch:watch add package.json +16ms brunch:watch add brunch-config.js +0ms brunch:watch add /Users/stearns/brunch-starter/node_modules/bootstrap/scss/bootstrap.scss +1ms brunch:list Reading node_modules/bootstrap/scss/bootstrap.scss +0ms brunch:file Init node_modules/bootstrap/scss/bootstrap.scss: isntModule=true isWrapped=false +3ms brunch:list Compiled node_modules/bootstrap/scss/bootstrap.scss +6ms brunch:watch add app/application.js +1ms brunch:list Reading app/application.js +0ms brunch:file Init app/application.js: isntModule=false isWrapped=true +1ms brunch:pipeline Compiling app/application.js @ JavaScriptCompiler +1ms brunch:watch add app/assets/index.html +17ms brunch:asset Init app/assets/index.html directory=app/assets/ relativePath=index.html destinationPath=public/index.html +1ms brunch:watch add app/styles/main.scss +1ms brunch:list Reading app/styles/main.scss +0ms brunch:asset Copied app/assets/index.html +7ms brunch:file Init app/styles/main.scss: isntModule=false isWrapped=false +1ms brunch:pipeline Compiling app/styles/main.scss @ SassCompiler +0ms brunch:pipeline Dependencies app/styles/main.scss @ SassCompiler +4ms brunch:list Compiled app/styles/main.scss +0ms brunch:list Reading node_modules/bootstrap/dist/js/npm.js +6ms brunch:modules Wrapping application.js @ commonjs +0ms brunch:list Compiled app/application.js +1ms brunch:file Init node_modules/bootstrap/dist/js/npm.js: isntModule=true isWrapped=true +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/util.js +33ms brunch:list Reading node_modules/bootstrap/dist/js/umd/alert.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/button.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/carousel.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/collapse.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/dropdown.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/modal.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/scrollspy.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/tab.js +1ms brunch:list Reading node_modules/bootstrap/dist/js/umd/tooltip.js +0ms brunch:list Reading node_modules/bootstrap/dist/js/umd/popover.js +0ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/npm.js +0ms brunch:list Compiled node_modules/bootstrap/dist/js/npm.js +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/util.js: isntModule=true isWrapped=true +1ms brunch:file Init node_modules/bootstrap/dist/js/umd/alert.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/button.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/carousel.js: isntModule=true isWrapped=true +1ms brunch:file Init node_modules/bootstrap/dist/js/umd/collapse.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/dropdown.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/modal.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/scrollspy.js: isntModule=true isWrapped=true +1ms brunch:file Init node_modules/bootstrap/dist/js/umd/tab.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/tooltip.js: isntModule=true isWrapped=true +0ms brunch:file Init node_modules/bootstrap/dist/js/umd/popover.js: isntModule=true isWrapped=true +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/util.js +18ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/util.js +2ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/button.js +18ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/button.js +0ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/alert.js +54ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/alert.js +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/carousel.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/carousel.js +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/collapse.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/collapse.js +0ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/dropdown.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/dropdown.js +0ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/modal.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/modal.js +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/scrollspy.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/scrollspy.js +4ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/tab.js +2ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/tab.js +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/tooltip.js +1ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/tooltip.js +1ms brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/popover.js +1ms brunch:list Compiled node_modules/bootstrap/dist/js/umd/popover.js +1ms brunch:write Writing 4/4 files +69ms brunch:generate Concatenating [node_modules/bootstrap/scss/bootstrap.scss] => public/vendor.css +2ms brunch:generate Concatenating [app/application.js] => public/app.js +2ms brunch:generate Concatenating [app/styles/main.scss] => public/app.css +2ms brunch:generate Concatenating [node_modules/bootstrap/dist/js/npm.js, node_modules/bootstrap/dist/js/umd/alert.js, node_modules/bootstrap/dist/js/umd/button.js, node_modules/bootstrap/dist/js/umd/carousel.js, node_modules/bootstrap/dist/js/umd/collapse.js, node_modules/bootstrap/dist/js/umd/dropdown.js, node_modules/bootstrap/dist/js/umd/modal.js, node_modules/bootstrap/dist/js/umd/popover.js, node_modules/bootstrap/dist/js/umd/scrollspy.js, node_modules/bootstrap/dist/js/umd/tab.js, node_modules/bootstrap/dist/js/umd/tooltip.js, node_modules/bootstrap/dist/js/umd/util.js] => public/vendor.js +3ms brunch:common Writing public/vendor.css +33ms brunch:common Writing public/app.js +0ms brunch:common Writing public/app.css +0ms brunch:common Writing public/vendor.js +1ms brunch:common Writing public/app.css.map +4ms brunch:common Writing public/app.js.map +1ms brunch:common Writing public/vendor.css.map +0ms brunch:common Writing public/vendor.js.map +8ms 27 Mar 03:52:23 - info: compiled 15 files into 4 files, copied index.html in 776ms 

Answer 1

npm.styles should only be used to add compiled CSS from node_modules . In this case, if you do not want to configure the download, you can use

 npm: { styles: { bootstrap: ['dist/css/bootstrap.css'] } } 

Or, to use its sass version (to configure it, etc.), you need to:

• plugins.sass.options.includePaths = ['node_modules/bootstrap/scss'] as you tried. It just adds the boot path to the sass' load path
• actually @import 'bootstrap' in your SASS file. Otherwise, how does SASS know if it should include this or not, and where to include it?

Please note that in this case you will have one large css file as output (app.css)