# Can't override bootstrap 4 via bower **URL:** https://discourse.roots.io/t/cant-override-bootstrap-4-via-bower/11286 **Category:** sage **Tags:** sage8, gulp **Created:** 2018-01-10T16:55:05Z **Posts:** 6 ## Post 1 by @dpc — 2018-01-10T16:55:05Z So trying to remove unused bootstrap elements from my site. Everything i’ve read points to doing it here but there are no bootstrap 4, SASS examples i can find I got the this scss list from the bower\_components/bootstrap/\_bootstrap.scss file. But for some reason it doesn’t seem to grab everything so the css wont compile. bower.json - ``` { "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta", "popper.js": "^1.12.3", "font-awesome": "fontawesome#^4.7.0" }, "overrides": { "bootstrap": { "main": [ "./scss/mixins", "./scss/utilities", "./scss/functions", "./scss/variables", "./scss/print", "./scss/reboot", "./scss/type", "./scss/images", "./scss/code", "./scss/grid", "./scss/tables", "./scss/forms", "./scss/buttons", "./scss/transitions", "./scss/dropdown", "./scss/button-group", "./scss/input-group", "./scss/custom-forms", "./scss/nav", "./scss/navbar", "./scss/card", "./scss/breadcrumb", "./scss/pagination", "./scss/badge", "./scss/jumbotron", "./scss/alert", "./scss/progress", "./scss/media", "./scss/list-group", "./scss/close", "./scss/modal", "./scss/tooltip", "./scss/popover", "./scss/carousel", "./scss/utilities", "./scss/clearfix", "./js/dist/transition.js", "./js/dist/alert.js", "./js/dist/button.js", "./js/dist/carousel.js", "./js/dist/collapse.js", "./js/dist/dropdown.js", "./js/dist/modal.js", "./js/dist/tooltip.js", "./js/dist/popover.js", "./js/dist/scrollspy.js", "./js/dist/tab.js" ] } } } ``` Errors all point to missing mixins etc. `messageOriginal: no mixin named media-breakpoint-up` Anyone successfully cut out unwanted scss and js files from bootstrap? --- ## Post 2 by @ben — 2018-01-10T17:00:49Z > [@dpc](#): > > “./scss/mixins”, > “./scss/utilities”, > “./scss/functions”, > “./scss/variables”, > “./scss/print”, > “./scss/reboot”, > “./scss/type”, > “./scss/images”, > “./scss/code”, > “./scss/grid”, > “./scss/tables”, > “./scss/forms”, > “./scss/buttons”, > “./scss/transitions”, > “./scss/dropdown”, > “./scss/button-group”, > “./scss/input-group”, > “./scss/custom-forms”, > “./scss/nav”, > “./scss/navbar”, > “./scss/card”, > “./scss/breadcrumb”, > “./scss/pagination”, > “./scss/badge”, > “./scss/jumbotron”, > “./scss/alert”, > “./scss/progress”, > “./scss/media”, > “./scss/list-group”, > “./scss/close”, > “./scss/modal”, > “./scss/tooltip”, > “./scss/popover”, > “./scss/carousel”, > “./scss/utilities”, > “./scss/clearfix”, These aren’t filepaths. You need to use the filepath, not the same format you would be using inside a Sass stylesheet (add the file extensions and the underscores). --- ## Post 3 by @ben — 2018-01-10T17:01:14Z --- ## Post 4 by @dpc — 2018-01-10T17:13:23Z hey ben - thanks added the extension but still the same? ``` "bootstrap": { "main": [ "./scss/clearfix.scss", "./scss/mixins.scss", "./scss/utilities.scss", "./scss/functions.scss", "./scss/variables.scss", "./scss/print.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", "./js/dist/transition.js", "./js/dist/alert.js", "./js/dist/button.js", "./js/dist/carousel.js", "./js/dist/collapse.js", "./js/dist/dropdown.js", "./js/dist/modal.js", "./js/dist/tooltip.js", "./js/dist/popover.js", "./js/dist/scrollspy.js", "./js/dist/tab.js" ] } ``` `Error: no mixin named media-breakpoint-up ``` Backtrace: assets/styles/components/_sharing-icons.scss:14` ``` Or do we need `./../bower_components/` or similar? --- ## Post 5 by @dpc — 2018-01-10T17:19:31Z ok - working bower file here. Remove what you don’t need! ``` { "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word " ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta", "popper.js": "^1.12.3", "font-awesome": "fontawesome#^4.7.0" }, "overrides": { "bootstrap": { "main": [ "./scss/_functions.scss", "./scss/_variables.scss", "./scss/_mixins.scss", "./scss/_print.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", "./js/dist/transition.js", "./js/dist/alert.js", "./js/dist/button.js", "./js/dist/carousel.js", "./js/dist/collapse.js", "./js/dist/dropdown.js", "./js/dist/modal.js", "./js/dist/tooltip.js", "./js/dist/popover.js", "./js/dist/scrollspy.js", "./js/dist/tab.js" ] } } } ``` D. --- ## Post 6 by @ben — 2018-01-10T17:43:32Z