Bootstrap 自定义在 Angular 7 中不起作用答案

【问题标题】：Bootstrap customization not working in angular 7Bootstrap 自定义在 Angular 7 中不起作用
【发布时间】：2019-01-10 08:53:51
【问题描述】：

我正在尝试在 Angular 7 中自定义 bootstrap 4 主题，

我已经安装了引导程序，

在我有角度的 .json 中

 "styles": [
                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                "./node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/styles.scss"
            ],

style.scss 是我的自定义 scss 类，

在 style.scss 中

我正在尝试更改警告主题的颜色

    @import "../node_modules/bootstrap/scss/bootstrap.scss";

   $theme-colors: ( "warning": #0074d9, "danger": #ff4136 );

我有一个带有 btn-warning 类的按钮，我正在尝试更改 btn-warning 颜色。但不工作

style.scss 在我看来正在渲染，但按钮颜色没有改变。

我做错了什么？

【问题讨论】：

在 assets 文件夹中添加您的自定义 scss 文件

标签： angular bootstrap-4

【解决方案1】：

在您的样式数组中，您正在导入 bootstrap.min.css，而在 style.scss 中，您将导入 bootstrap.scss。为什么要导入这两个不同的 css 文件？这两个文件将相互覆盖。

【讨论】：

请参考我关注的链接：medium.com/@manivel45/…
在本教程中，我没有发现 style.scss 添加了这个 @import "../node_modules/bootstrap/scss/bootstrap.scss";
删除@import "../node_modules/bootstrap/scss/bootstrap.scss";从 style.scss 然后尝试一次
我尝试删除导入语句，但它停止工作，导入语句是强制性的。

【解决方案2】：

我尝试将 bootstrap.scss 的导入移到我的 style.scss 中，例如：

$theme-colors: ( "warning": yellow, "danger": #ff4136, "customcolor": red);

@import "./node_modules/bootstrap/scss/bootstrap.scss";

它奏效了。

【讨论】：