Can't override bootstrap 4 via bower

sage
,
1

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 <ben@benword.com>"
  ],
  "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?

2

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).

4

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?

5

ok - working bower file here. Remove what you don’t need!

    {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "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.

2 Likes