Custom colours

I have two Vue Projects that I want to share a colour palette

I have created a product-style project, and imported MDBootstrap and Bootstrap.

 "dependencies": {
    "bootstrap": "^4.3.1",
    "mdbvue": "git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/vue/vu-pro.git"
  }

I also have created a _main.scss to apply my own colours which my other projects reference

$roboto-font-path: '../../node_modules/mdbvue/build/font/roboto/';
$image-path: '../../node_modules/mdbvue/build/img/';

// Import custom font from Google
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* RGB */
$storism-darkblue: #032445;
$storism-lightblue: #59aeb1;
$storism-lightgrey: #ccdad1;
$storism-grey: #9caea9;
$storism-darkgrey: #788585;

$body-bg: white;
$body-color: $storism-darkblue;

// Override / set color variables
$white: #fff;
$black: #000;
$green: #00fd16;
$blue: $storism-darkblue;
$orange: #fd6c22;
$yellow: #ffd925;
$red: #fd2016;
$pink: #f50057;

// Override fonts
$font-family-sans-serif: 'Raleway',
sans-serif;

@import 'bootstrap/scss/bootstrap.scss';
@import 'mdbvue/build/scss/mdb.scss';

:root has my Blue but it isn't picking up in things like the when I use the Blue class

Am I being daft / missing the point or should I be able to do this