Using exported scss variables in .vue template and script elements

I am attempting to use scss variables defined in an app.scss file across all elements in my .vue files. An example in my app.scss file:

$blue: #003c88;
:export {
       blueColor: $blue;
}

To be used in a .vue file within the template element, something like this:

<v-icon
 color= "blueColor"
 x-small
 v-bind="attrs"
 v-on="on">
</v-icon>

Or to be used within the script element.

Other similar posts have recommended importing it into .vue file like so:

import variables from 'app.scss';

blueColor = variables.blueColor;

However I am already importing my app.scss file so I can automatically reference scss variables in the style element of my vue files, this is in my vue.config.js file:

css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/app.scss";`
      }
    }
  }

And thus when attempting the previously mentioned import solution I predictably get this error:

SassError: This file is already being loaded.

How can I keep my current config of automatically loading my app.scss file into my .vue files to be used in the style element, while also referencing scss variables in the template and script elements?