Override global Sass variables

[vaindil]

How can I override Bootstrap's global Sass variables, such as brand-primary? My code is below. I've tried various ways of accomplishing this but nothing has worked.

App.vue:

<template>
  <div id="app">
  </div>
</template>

<script>
require('./theme/app.scss')
require('../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss')
</script>

app.scss:

$brand-primary: blue;
$body-bg: green;