多个 "themes" 和 SASS 个模块

Multiple "themes" with SASS Modules

项目描述

所以我有一个项目在一个应用程序中有两个不同的品牌。我有一组基本的组件样式，然后我有两个不同的入口点 Scss 文件：

品牌 1

brand1-index.scss
 - @import brand1-settings-vars.scss
 - @import base-styles-index.scss
 - @import brand1-specific-styles.scss

品牌 2

brand2-index.scss
 - @import brand2-settings-vars.scss
 - @import base-styles-index.scss
 - @import brand2-specific-styles.scss

基本样式

base-styles-index.scss
 - @import lots-of-small-scss-files.scss
 - @import ... etc.

您可能会猜到，因为它是旧 sass 系统中的一种模式，所以每个品牌的颜色、字体和其他变量都被命名为相同的，然后在基本样式中使用。一共有15个变量。

我在找什么

我正在尝试更新它以使用更新的基于模块的系统，但我没有看到任何简单的更新方法。我想避免为我的每个 lots-of-small-scss-files.scss 编写 with 语句，因为那将是一场噩梦，因为我必须在每个文件中使用 [=17= 声明每个 var ] 以便能够将它们传递下去。

我会喜欢的是，如果有一种方法可以在我的基础中创建一个变量文件，然后由我的品牌变量重载，然后我就 @use 该文件在我的基地内，但我没有看到这样做的方法。

我一定不是在谷歌上搜索正确的东西，因为我确定有人需要这样做，但我找不到任何相关信息。

建议？

所以我在“我会喜欢什么”之后所描述的结果是完全可能的。您不需要显式分配变量，只需在基本样式的设置文件中使用 @forward 而不是 @use。

基础文件

品牌索引文件