How do I specify a bower resource to be included after bootstrap?

Hi, I’m going crazy trying to get the bootstrap mega menu Yamm3 to get added correctly to the css file. It should be added after bootstrap in the source but it doesn’t. I think it is because of bootstrap being added to the main.scss file as a part of my site’s code instead of like a dependency (default sage configuration), so the yamm3 dependency definition doesn’t get included in the correct order.

How can I make sure that asset builder pulls together bootstrap and yamm in the correct order? Can I remove bootstrap from my main.scss and have it pulled in like a normal dependency but still define my own variables.scss?

You need to add it to main.scss, at the end of the file or whoever in your source order is appropriate.

@import "common/global"; //@import "common/woo"; @import "components/buttons"; @import "components/comments"; @import "components/forms"; @import "components/grid"; @import "components/wp-classes"; @import "layouts/header"; @import "layouts/sidebar"; @import "layouts/footer"; @import "layouts/pages"; @import "layouts/posts"; @import "layouts/tinymce"; @import "pages/home"; @import "pages/product-category"; @import "pages/product-single"; @import "pages/about-us"; @import "components/yamm3"; // Add here < - - - - - -

See screen shot bellow:

1 Like

Yeah, but it still gets automatically included by the build system but as the first resource in the compiled css file. So I should prevent it from being added by overriding the “main” property in the bower.json file and then import it manually in main.scss? But doesn’t that go against the entire purpose of using the preconfigured sage build system?

Sage is just a starting point, it’s meant to be modified to your needs. Its not meant to be preconfigured for every need. The point is to customize it to do exactly what you need, so you should totally edit bower.json file to suit your needs.

You can also Install Bower packages with bower install --save <package-name>. Using the --save flag will add the package into your project’s dependencies.

The thing is that yamm3 has bootstrap set as a dependency so wiredep should include it after bootstrap, but doesn’t, is it because that sage has bootstrap-sass and not the bootstrap package?

Ok I’m not sure on the answer to that, but since yamm3 is just one .SCSS file there is really no reason why you can’t just manually include it into your SCSS, all the dependencies are in place so you don’t have much to gain by using a package manger ( especially if is just slowing you down at this point) I understand wanting to try to do everything the right way ( or at least trying to use the cool build tools ) but it’s just one file so I can’t think of a logical reason to not just add it where you need it

Make sure you’re installing it using bower install https://github.com/geedmo/yamm3.git#master --save because if you don’t grab the master/latest version it won’t have the SCSS file and Sage 8’s wiredep won’t use the CSS in the latest tag/release.

The master with SCSS will work correctly but you need to override its main property inside your theme’s bower.json. This is what I did:

  "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"
      ]
    },
    "Yamm3": {
      "dependencies": {
        "bootstrap-sass": "3.3.6"
      },
      "main": [
        "./yamm/_yamm.scss"
      ]
    }
  }

Thank you! That solved it! I think I assumed that the css would be added in the correct order by wiredep if bootstrap-sass was set as dependency but the scss files are just inserted into the main.scss file. I went with git master as you suggested and now it works fine!