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>

以下是我在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>

预先感谢您帮助此Vue新手。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

import import import javascript less