Configurar y optimizar Bootstrap 4 en Sage 8

Bootstrap es una de las librerías más utilizadas y nos proporciona mucha agilidad en nuestros proyectos, sin embargo, cargar todos sus recursos si no los necesitas puede ser poco beneficioso para el WPO de tu proyecto, una vez descargado por medio de Bower podríamos modificar su contenido para liberar peso de sus recursos, sin embargo a la hora de compartir nuestro proyecto con otros desarrolladores tendríamos que proporcionarle la carpeta de bootstrap modificada.
 
La mejor solución pasa por hacer un override de los componentes que queremos utilizar, de esta forma podemos usar bootstrap sin miedo a que sus recursos pesen más de lo que necesita nuestro proyecto. El siguiente código está basado en la versión 8.5.4 de Sage utilizando como dependencia la versión de Bootstrap 4.1.3.
 
bower.json
 

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "4.1.3" }, "overrides": { "bootstrap": { "main": [ "./scss/_functions.scss", "./scss/_variables.scss", "./scss/_mixins.scss", "./scss/_root.scss", "./scss/_reboot.scss", "./scss/_type.scss", "./scss/_images.scss", "./scss/_code.scss", "./scss/_grid.scss", "./scss/_tables.scss", "./scss/_forms.scss", "./scss/_buttons.scss", "./scss/_transitions.scss", "./scss/_dropdown.scss", "./scss/_button-group.scss", "./scss/_input-group.scss", "./scss/_custom-forms.scss", "./scss/_nav.scss", "./scss/_navbar.scss", "./scss/_card.scss", "./scss/_breadcrumb.scss", "./scss/_pagination.scss", "./scss/_badge.scss", "./scss/_jumbotron.scss", "./scss/_alert.scss", "./scss/_progress.scss", "./scss/_media.scss", "./scss/_list-group.scss", "./scss/_close.scss", "./scss/_modal.scss", "./scss/_tooltip.scss", "./scss/_popover.scss", "./scss/_carousel.scss", "./scss/_utilities.scss", "./scss/_print.scss", "./js/dist/alert.js", "./js/dist/button.js", "./js/dist/carousel.js", "./js/dist/collapse.js", "./js/dist/dropdown.js", "./js/dist/index.js", "./js/dist/modal.js", "./js/dist/popover.js", "./js/dist/scrollspy.js", "./js/dist/tab.js", "./js/dist/tooltip.js", "./js/dist/util.js" ] } }
}

 
Si experimentas problemas con javascript puedes utilizar este otro código
 

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "4.1.3" }, "overrides": { "bootstrap": { "main": [ "./scss/_functions.scss", "./scss/_variables.scss", "./scss/_mixins.scss", "./scss/_root.scss", "./scss/_reboot.scss", "./scss/_type.scss", "./scss/_images.scss", "./scss/_code.scss", "./scss/_grid.scss", "./scss/_tables.scss", "./scss/_forms.scss", "./scss/_buttons.scss", "./scss/_transitions.scss", "./scss/_dropdown.scss", "./scss/_button-group.scss", "./scss/_input-group.scss", "./scss/_custom-forms.scss", "./scss/_nav.scss", "./scss/_navbar.scss", "./scss/_card.scss", "./scss/_breadcrumb.scss", "./scss/_pagination.scss", "./scss/_badge.scss", "./scss/_jumbotron.scss", "./scss/_alert.scss", "./scss/_progress.scss", "./scss/_media.scss", "./scss/_list-group.scss", "./scss/_close.scss", "./scss/_modal.scss", "./scss/_tooltip.scss", "./scss/_popover.scss", "./scss/_carousel.scss", "./scss/_utilities.scss", "./scss/_print.scss", "./dist/js/bootstrap.bundle.js" ] } }
}