如何解决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 举报,一经查实,本站将立刻删除。