VueJS: importing a (sass) file dynamically (from a variable, possibly process.env)

Question

how can I import a dynamically file from environment variables?

My scope is to include a general theme scss for a specific client, to my app.vue (or main.ts)

I would like to do something like this:

<style lang="sass">
  @import"./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";
</style>

or

import "./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";

How can I accomplish this?

if I do it via import (on top of main.ts) it says

Object is possibly 'undefined'.

if I do it via <style> and @import (inside my app.vue)

undefined ^ Media query expression must begin with '('

Any idea of how to do it?

Answer 1

So, after checking the net for dynamically importing modules in ES6 I found this thread which suggests just using import() like a function, and it works fine:

import("./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss");