Vue.js 基于子域加载 CSS

Question

我有一个使用 Vue cli 3 制作的 Vue js 应用程序。我在我的项目中使用了 sass loader 和 node-sass。

如果我有多个子域用于相同的代码，例如site1.mysite.com和site2.mysite.com ，我如何根据子域加载不同的 css 文件？

我已经在文件中有一个 JavaScript 函数来返回子域值。

在我的app.vue文件中，我有一个 scss 样式部分，有没有办法在 scss 中访问此函数，然后假设我以结构化方式命名了 css/scss 文件，然后加载子域的相关 CSS。

例子：

site1_theme.scss和site2_theme.scss在根文件夹/assets/scss

或者有没有不同的方法来做到这一点？

在此先感谢您的帮助。

Answer 1

您是否尝试过使用动态导入？

所以类似的东西：

if (domain === 'site1.mysite.com') {
    import('/assets/scss/site1_theme.scss');
} else {
    import('/assets/scss/site2_theme.scss');
}