在不编辑源代码的情况下覆盖 bootstrap4 变量答案

【问题标题】：Override bootstrap4 variables without editing source在不编辑源代码的情况下覆盖 bootstrap4 变量
【发布时间】：2017-10-26 14:59:36
【问题描述】：

我看到一些文章建议我必须编辑 _custom.scss 文件并重新编译引导程序。但是，我正在通过 npm 安装 bootstrap4。因此，在 node_modules 中更改 bootstrap 的内容将是一个非常糟糕的做法。

确切地说，我正在开发 Angular4 应用程序并使用 Angular CLI。

【问题讨论】：

【解决方案1】：

是的，不要触摸 Bootstrap 文件。此外，不要在 CSS 级别覆盖变量，这会创建额外的代码，而且您会让浏览器做额外的工作。

您希望在 Sass 级别覆盖该变量，以便 Bootstrap 的变量在从 Sass 转换为 CSS 时被更改，这样您就不会让两个规则竞争，并且您不会被绑定到任一加载顺序或特异性战争。

覆盖 Bootstrap 变量的最简单方法是创建自己的 scss 文件，我们将其命名为 main.scss。然后从这里调用自定义变量文件 variables.scss，然后调用引导程序核心。所以你的 main.scss 文件可能看起来像这样；

@import "path-to-npm/bootstrap";
@import "path-to-your-repo/variables";

而且由于 Bootstrap 的优秀人员并不总是在他们的变量上使用默认标志，因此调用这些文件的顺序很重要。所以你的 variables.scss 需要最后调用，并且可能包含类似这样的内容；

@dropdown-bg: hotpink;

然后您可以设置一个 Sass 监视任务，以监视对 main.scss 文件的更改，并将变量和 Bootstrap 库同时转换为一个 CSS 文件。

【讨论】：