Bower overrides in Sage 8.5.x

sage
2

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