0

So I am trying desperately to figure out how to add and control packages in roots.io/sage.

The environment is up and running (trellis and all), and my theme loads perfectly. I decided that I wanted to update bootstrap to alpha6 and to newest jquery. I believe these are the steps (for any new javascript library) would be.

  1. Use Bower to install the package (with --save)

bower --save install bootstrap@4.0.0-alpha.6

This adds the following to bower.json in the theme directory (root level, same as base.php), and as I only want the package, I don't think I need overrides?

  "dependencies": {
    "bootstrap": "4.0.0-alpha.6",

  1. Add the bower package to manifest.json

    "jquery.js": { "bower": ["jquery"] }, "bootstrap.js": { "bower": ["bootstrap"] }

This is where I get really curious, how do I now tell base.php to load it. The page loads OK, but it loads jquery v1.12.4. And I can't see a single line that tells base.php what to load where. Is the autoloader so efficient that it should figure out how to add CSS and JS files, or is it the overrides that does the magic?

What am I missing a really obvious step?

vrghost
  • 1,084
  • 2
  • 19
  • 42

1 Answers1

0

So I answered my own question, well, someone else did, in a very long post. But I had two problems, one was that I did not understand how the asset loader works with gulp (everything ends up in main.js and main.css). Secondly, my gulp process had died without me noticing, so it was loading the old versions of some bits.

Step 1 and 2 was right. But you need the overides to allow the asset loader to identify which js and css files to add to the main.js and main.css file. There is a very good flow chart on this thread https://discourse.roots.io/t/adding-bower-files-to-sage-8-0-0/2825/10

Secondly, bootstrap alpha6 is tricky to do as a bower file, so I stole someones elses hard work on that one as well https://gist.github.com/folbert/94f0b82a8807fb70f7346db7fb258ff6

vrghost
  • 1,084
  • 2
  • 19
  • 42