I'm struggling to get bootstrap 4 (the recent alpha) to load properly when using mix.extract()

My mix file:

mix.js('resources/assets/js/app.js', 'public/js').extract(['tether','vue','jquery','bootstrap'])
   .sass('resources/assets/sass/app.scss', 'public/css');

dev dependancies in package.json

  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap": "4.0.0-alpha.6",
    "font-awesome": "^4.7.0",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.1",
    "lodash": "^4.17.4",
    "tether":"^1.4.0",
    "vue": "^2.1.10"
  }

Now the error I'm getting is:

Uncaught Error: Bootstrap tooltips require Tether

I can see the vendor.js file is including tether after bootstrap. hence it is failing. This happens regardless of the ordering in mix.extract().

But, in my app.js I include the associated bootstrap.js file which sets the main variables for the components

window.Tether = require('tether');
window.Bootstrap = require('bootstrap');

However in the console, I can use the variable Tether. So it is eventually loaded correctly after app.js is finally included.

Does extract have a specific order and how does extract work if it needs separate dependancies like tether?

As if I run everything without the extract, then bootstrap loads happily and doesn't throw the error. Which is okay while I get started. I would like to take advantage of the mix.extract() in the future for caching the vendor files, if it can be done. I did think I needed to change my bootstrap.js file but removing the asset requires just makes more things fail.

Edit

Realised I do not need the Bootstrap JS components and well, I only need the scss. Should remember that less is more and that what I could do in bootstrap I could do in Vue.