Javascript VUE-如何使用App.VUE中的变量动态导入较少的文件

嗨，伙计们，我已经干了好几天了。我有一个SPA，需要满足40多家公司的需求，在那里应用程序应该使用相应的.less文件。在我的App.vue中，我使用“site.less”作为主要的全局样式表，并且我希望基于v.$root.theme.styles变量使用“company1.less”…2…3等。问题是我似乎找不到正确的语法，也不想求助于运行时解决方案

有人知道如何在@import内部使用变量吗？

旁注：v.$root.theme.styles变量用作示例公司，以简单起见

<script>
export default {
        name: 'app',
        beforeCreate() {

            this.environment = process.env.NODE_ENV;

            bootstrap().then(() => { });        // bootstrap the google analytics engine
            var v = this;

            // get the theme
            ThemeSystem.getCompanyTheme( window.location.host )
                .then( response =>
                {
                    v.$root.theme.companyName = response.companyName;
                    v.$root.theme.name = response.themeName;
                    v.$root.theme.styles = "../public/static/selective/selective.less";
                }
        }, 
    }
</script>

<style lang="less">
    @import "shared/site.less";
</style>

导出默认值{
名称：“应用程序”，
beforeCreate（）{
this.environment=process.env.NODE\u env；
bootstrap（）。然后（（）=>{}）；//引导google分析引擎
var v=这个；
//了解主题
ThemeSystem.getCompanyTheme（window.location.host）
。然后（响应=>
{
v、 $root.theme.companyName=response.companyName；
v、 $root.theme.name=response.themeName；
v、 $root.theme.styles=“../public/static/selective/selective.less”；
}
}, 
}
@导入“shared/site.less”；

以下是我在网站下方尝试过的内容。减少导入：

<style :lang="less" :src="this.$root.theme.styles"></style>
<style src=`${this.$root.theme.styles}`></style>
<style src="{{this.$root.theme.styles}}"></style>
<style lang="less">
    @import "{{this.$root.theme.styles}}";
    @import `${this.$root.theme.styles}`;
</style>

@导入“{this.$root.theme.styles}}”；
@导入`${this.root.theme.styles}`；

提前感谢您帮助这个Vue noob