The best way to integrate stylus and bootstrap in elixer

I've gone through most of the elixir videos on site, but my JS is sadly lacking at the moment.

I'm trying to move off CDN's and organize some larger non-laravel projects onto laravel 5.3, while at the same time do some extensive CSS redesign.

I've started using stylus which I find really comfortable, however when I try and mix stylus and bootstrap together in elixer, I can't figure it out.

Right now, I'm attempting to mix bootstrap which comes already set in laravel 5.3 and then over write certain classes in stylus.

1. Is this possible?
2. Is there a better way?

Here's a pretty basic code sample.

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');
require('laravel-elixir-stylus');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
    mix.stylus(['app.styl','../../../public/css/app.css']);
});

resources/assets/sass/app.scss - the default stuff

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

resources/assets/stylus/app.styl - the place where, I'd add all the additions

// Variables
@import 'variables/variables.styl'

//TEST
body
  background blue

Any Advice on how to make this happen or a better strategy is welcome.

Thank in advance -Roni