在Vue中基于Promise的全局sass / scss变量

Question

在vue cli应用程序中，scss全局变量是通过webpack链注入的，或者仅使用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获取数据。因此，我尝试通过axios向服务器发出get请求，如下所示：

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))

通过这种方式，数据存在但不导出，或由webpack链接。 有办法执行此操作吗？

谢谢。