如何使用特定于应用程序的值覆盖共享库中的 sass 变量

Posted 2023-03-23

【中文标题】如何使用特定于应用程序的值覆盖共享库中的 sass 变量

【英文标题】：How to override sass variables in a shared library with application specific values

【发布时间】：2020-05-09 22:59:28

【问题描述】：

给定一个具有以下布局的 Nx monorepo (angular-cli)

apps
-app1
-app2
libs
-shared
-feature1
-feature2

共享库中有一个 variables.scss 文件，其中包含颜色变量。 功能库中的组件样式表会导入这些变量。 到目前为止，一切都很好。 app1 和 app2 都导入功能库（延迟加载）

问题：如何覆盖颜色变量，以便为 app1 和 app2 呈现不同颜色的功能组件？

【参考方案1】：

我的解决方案是将styles.scss 包含在应用程序的样式数组中，然后在styles.scss 文件中我导入共享变量文件。导入文件后添加变量会覆盖共享变量。