reactjs - 如何根据导入的父项目在 React 库中使用不同的 SCSS 变量集

Question

好的，所以我可能会出错，所以请耐心等待。如果您认为解决方案正朝着完全不同的方向发展，请说出来。

我的公司有一个“单体”风格的应用程序，而且越来越难以维护。我们已经开始将所有内容分解为各种“微”应用程序，包括微服务和微前端。我目前正在为我们的第一个微前端开发原型。

我们完全是一家 react 商店，所以我们采用了一种简单的方法，即让组件库导出其特定“页面”的父级，然后将该页面导入一个仅包含导航栏的 shell 项目，react-路由器等

无论如何，分解它的最大问题是我们的 SCSS 变量。我们的颜色、大小等都来自核心 SCSS 变量文件。除了我们的应用程序有两个独立的前端之外，这没什么大不了的。基本上是两个独立的门户，它们为不同的客户群共享许多相同的 UI 元素，但存在一些差异。这是我们走这条路的另一个原因，微前端将更容易共享 UI 功能。但是，这两个门户都有不同的调色板和其他项目来区分它们。

那么，这一切意味着什么？这意味着我有如下所示的 SCSS 文件：

@import '../../assets/css/variables';

.delete-text {
    color: $color-secondary;
}

“$color-secondary”是来自导入变量文件的变量。我们的两个门户有单独的变量文件。名称都相同，但值不同。

所以我坐在这里盯着这些 SCSS 文件，想知道如何让它们有条件地使用不同的变量集。我不能进行有条件导入的事实是一个挑战。

这是一个 React 项目。各个库（也就是我们的微前端）仅使用 Babel 构建，我们的主要项目将它们导入到 Webpack 中使用。想法将不胜感激。

标签： reactjssass