Как вставить глобальную константу в компонент vue <style>?

Я ищу, как внедрить глобальный (THEME_NAME в моем примере) во все компоненты vue:

<template>..</template>
<style lang = "scss">
    @import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";

    .foo {
      color: $primary;
    }
</style>

Контекст:

Я использую darkly тема из Bulma css в моем приложении vue (vue Cli 3)

<template>..</template>
<style lang = "scss">
    @import "bulmaswatch/darkly/bulmaswatch.scss";
    .foo {
        color: $primary;
    }
</style>

Чтобы переключиться на тему cyborg, мне придется везде заменить darkly на cyborg ...

Есть ли способ лучше? Что-то типа

<template>..</template>
<style lang = "scss">
    @import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";

    .foo {
      color: $primary;
    }
</style>

то где-нибудь в Webpack или vue.config.js мы можем решить, что это за тема

configureWebpack: () => {
    return {
        plugins: [
            new webpack.DefinePlugin({
                THEME_NAME: "cyborg"
            }),
        ],
    }
}