Обоснованные глобальные переменные sass / scss в vue

Question

В приложении vue cli глобальные переменные scss вводятся цепочкой веб-пакетов или просто с помощью vue.config.js, как я это делал ниже.

let data = require('./public/content.json')
let color = data.app.skin.color
 
module.exports = {
    css: {
      loaderOptions: {
        sass: {
          data: `
                $font: 'my font';
                $host: 'example.com';
                $turquaz: ${color.turquaz};
                $green: ${color.green};
                $green_dark: ${color.green_dark};
                $green_darker: ${color.green_darker};
                $yellow: ${color.yellow};
                $yellow_dark: ${color.yellow_dark};
                $yellow_darker: ${color.yellow_darker};
                $red: ${color.red};
                $red_dark: ${color.red_dark};
                $red_darker: ${color.red_darker};
                $white: ${color.white};
                $grey: ${color.grey};
                $dark: ${color.dark};
                $dark_overlay: ${color.dark_overlay};
                @import '@/styles/main.scss';
            `
        }
      }
    }
}

Но пользователи решили получать данные через API. Поэтому я попытался сделать запрос get к серверу по axios, как показано ниже:

const Axios = require('axios')

Axios.get(`api.example.com`)
  .then(response => {
    let color = response.data.app.skin.color
    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            data: `
                  $font: 'my font';
                  $host: 'example.com';
                  $turquaz: ${color.turquaz};
                  $green: ${color.green};
                  $green_dark: ${color.green_dark};
                  $green_darker: ${color.green_darker};
                  $yellow: ${color.yellow};
                  $yellow_dark: ${color.yellow_dark};
                  $yellow_darker: ${color.yellow_darker};
                  $red: ${color.red};
                  $red_dark: ${color.red_dark};
                  $red_darker: ${color.red_darker};
                  $white: ${color.white};
                  $grey: ${color.grey};
                  $dark: ${color.dark};
                  $dark_overlay: ${color.dark_overlay};
                  @import '@/styles/main.scss';
              `
          }
        }
      }
    }
  }).catch(error => console.error(error))

Таким образом, данные присутствуют, но не экспортируются или не объединяются в пакеты. Есть ли способ выполнить это действие?

Заранее спасибо.