我们正在使用 VueJS 作为前端构建一个应用程序。但我们有点将 2 个应用程序合二为一。公众看到的电子商务方面，我们有一个管理面板，我们的员工可以使用它来添加产品、用户等。

我想知道以不同方式设计每个部分的最佳方式。在电子商务方面，我们希望使用 1 个样式表 (scss)，然后我们的管理面板使用另一个样式表。我们遇到的问题是，当全部编译时，两者都会添加到应用程序的两侧。因此，因为我们的管理员是第二个加载的，所以我们的所有颜色变量都显示在应用程序的电子商务公共端。

我们已经从 main.js 中取出了 main.scss 并创建了 main.scss 和 main-admin.scss，然后我们将这些文件导入到它们各自的页面模板文件中，我们认为这将把这两个文件解耦。但这不起作用，关于实现此目的的最佳方法有什么建议吗？