Bower overrides in Sage 8.5.x

Hi Guys,

I’m new to all this so I’ve just purchased “The Book” and I’m working through it to get to grips with the workflow. I’m new to Bower, having never used it before and I’m struggling to understand the section titled “Override Bower Packages”.

The Book says: “We manually override the main Bower files for Bootstrap. Bootstrap doesn’t actually need any overrides to work out of the box, but in bower.json we’ve added a list of files as a boilerplate for you to modify. This way you could quickly remove any JavaScript components, or the fonts, if you’re not using them.”

However, with my install of Sage (8.5.1) I see no such list in bower.json What is the correct syntax here and what exactly is happening? What is the “override” exactly and why would I need it?

Furthermore, the next section “Installing Bower packages” talks about font awesome (which I’m going to use in my current project!). I think I understand in that the font files won’t be added when the assets are built, then it says:
“In order to grab the fonts, we need to add the fonts directory to the overrides in the theme’s bower.json file:” and gives me the code but as I don’t see any overrides in my bower.json I’m not sure where to add this and again I’m not confident that I understand why I have to?

Any help or resources here would be greatly appreciated.

Great questions! Thank you for reading up!

…with my install of Sage (8.5.1) I see no such list in bower.json What is the correct syntax here and what exactly is happening? What is the “override” exactly and why would I need it?

The override array allows you to override the files which Bower will use from the frontend package. In Sage 8.5.x we switched to using Bootstrap 4 and the bower.json file no longer ships with overrides. You can view the 8.4.2 tag on Github and its bower.json which still has the overrides intact for you to emulate.

  "overrides": {
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }

Furthermore, the next section “Installing Bower packages” talks about font awesome (which I’m going to use in my current project!). I think I understand in that the font files won’t be added when the assets are built, then it says:
“In order to grab the fonts, we need to add the fonts directory to the overrides in the theme’s bower.json file:” and gives me the code but as I don’t see any overrides in my bower.json I’m not sure where to add this and again I’m not confident that I understand why I have to?

The font files will be added. If you look at the FontAwesome package’s Bower file and the main property you can see that it calls in both a SCSS and a LESS file. I’m still not entirely sure why they do that, but you only need one. This is why we override it. You also need to include the fonts. @kalenjohnson’s solution is still the best and it does both of these overrides for you.

HTH

1 Like

Awesome, thank you very much for the explanation and the link to @kalenjohnson’s solution, it was an educational read. I’ve got it working now, fonts appears in the dist folder and I understand what is going on a lot better.