如何在带有 sass 的 Bootstrap 中使用多个主题答案

【问题标题】：How to use multiple theme in Bootstrap with sass如何在带有 sass 的 Bootstrap 中使用多个主题
【发布时间】：2021-08-30 23:30:27
【问题描述】：

在 scss 文件中：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$primary_color: #EC424F;
.dark {
    $primary_color: #403F45 !global;
}

.light {
    $primary_color: #f4f4f4 !global;
}

$theme-colors: ( "primary": $primary_color);

@import "~bootstrap/scss/bootstrap";

我尝试过这种方法但不起作用它只是为所有元素选择最后一个类（黄色）中的最后一个变量颜色，即使我是否添加了灯光类

在html文件中：

<button type="button" class="btn btn-primary btn-lg btn-block">Default</button>
<button type="button" class="btn btn-primary btn-lg btn-block dark">Dark</button>
<button type="button" class="btn btn-primary btn-lg btn-block light">Light</button>

结果：

我正在使用 Angular，有人知道如何在 sass 中使用多个或可切换的引导主题吗？

【问题讨论】：

标签： angular bootstrap-4 sass angular-ui-bootstrap scss-lint

【解决方案1】：

您是想添加新的按钮颜色还是能够完全切换整个主题？

如果您只是想更改应用于 html 中使用的类名的样式，例如 btn-primary，您可以通过映射来实现。

$theme-colors: map-merge($theme-colors, $your-custom-theme);

这将覆盖任何以前的类名并添加新的类名。

为了使用 SASS 创建多个主题，本质上，您正在编译嵌套在主题类名称下的多个样式表。这更复杂，可以通过几种不同的方式完成。我发现的最省时和最干净的方法是将引导节点模块文件直接导入每个主题（因此可以使用不同的变量重新构建它们）并首先声明您的变量和自定义映射并在主题类名称下导入它们。注意：您必须手动拉入引导变量来执行此操作并删除 !default;或者变量名不能被覆盖。

然后，对于 Angular，创建一个服务，在项目的根目录中获取 id 和类名……我将 id 和类放在 html 标记中……并动态更改类名。

我没有编写冗长的教程，而是附上了我的沙箱，以便您了解我的意思。

https://codesandbox.io/s/angular-bootstrap5-theming-tkw8j

点击“浅色主题”和“深色主题”按钮

忽略丑陋的颜色......我只是随机选择了一些来显示对比。

【讨论】：

是否可以生成多个CSS文件并切换文件而不是类名？这将大大减少输出捆绑的 css 大小，因为文件是分开的，并且一次只使用一个主题 css 文件（在浏览器中加载）。

【解决方案2】：

您可以为 3 个主题加载 3 种文件样式：默认、深色、浅色 - 默认.css - 黑暗的.css - light.css

或者在 body 标记处为每个主题使用 1 个类名。

试试看：https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7

【讨论】：