使用 Bootstrap 和 sass 主题化 Angular 应用程序和库答案

【问题标题】：Theming Angular Apps and Libraries with Bootstrap and sass使用 Bootstrap 和 sass 主题化 Angular 应用程序和库
【发布时间】：2020-07-04 15:26:05
【问题描述】：

我正在使用 MonoRepo 方法来构建客户应用程序。我所有的逻辑类组件都在几个 Angular 库中。对于每个客户，我都会有一个不同的应用程序在其中进行一些配置并提供客户想要的布局。此外，在每个客户应用程序中，我想覆盖引导程序主题颜色。在库/组件中，我想访问主题颜色。

问题来了：在我的库中的 components.scss 文件中，我既不能从引导程序导入 variables.scss（因为那样我会有默认颜色），也不能从我的应用程序导入 variables.scss（因为这样我的所有库组件中都会有一个特定客户的颜色） .

如何解决使用 scss 为每个应用单独设置样式的问题？

【问题讨论】：

Bootstrap 使用 css 变量（检查 :root），因此您可以简单地覆盖它们，从而为大多数可以通过更改 css 变量动态更改的组件设置主题
@Sergey 我知道，但似乎引导程序根本不想更改为 css 变量。所以我不知道这有多可靠。请参阅此 Github 讨论：github.com/twbs/bootstrap/issues/26596
您是否考虑过将主题变量拆分到另一个文件中？然后，您可以首先包含全局样式并包含来自动态客户 url 的主题变量。或者，创建仅具有实用程序类的组件并为每个客户设置样式。

标签： angular twitter-bootstrap sass bootstrap-4

【解决方案1】：

我可以建议您尝试在 StackOverflow 上讨论的 this option。它使用 includePaths 方法而不是 fileReplacements（这是我的第一个想法，但目前 Angular 不适用于 SCSS）。

我相信您可以使用不同的配置进行构建，并根据您构建的项目替换 SCSS 变量文件。不幸的是，这种方法需要为每个需要自己样式的项目使用大量配置来污染 angular.json 文件。

【讨论】：

感谢您的回答。我不觉得我在污染我的 angular.json，因为我只是将 stylePreprocessorOptions 添加到我的 'projectName'->architect->build->options 属性中。这样它就会应用于我所做的一切，比如 ng serve 或 ng build ，除非我在我的服务选项中覆盖它。
很高兴它帮助了你