在 Bootstrap 4.3.1 中覆盖 _variables 的正确方法是什么？答案

【问题标题】：What is the right way to override _variables in Bootstrap 4.3.1?在 Bootstrap 4.3.1 中覆盖 _variables 的正确方法是什么？
【发布时间】：2020-03-12 01:20:16
【问题描述】：

我在我的 Angular 8 项目中使用 Bootstrap 4.3.1。基本上我想（更改/覆盖）引导程序的一些默认变量。比如 $font-size-base

我尝试过下面的代码，但这根本不起作用，请建议我在 Angular 项目中（自定义/更改/覆盖）引导 scss 变量的正确方法是什么。

angular.json

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/scss/style.scss"
        ],

style.scss

@import "../../node_modules/bootstrap/scss/_functions";
@import "../../node_modules/bootstrap/scss/_variables";
@import "../../node_modules/bootstrap/scss/mixins";
$font-size-base: 0.655rem;

package.json

"@ng-bootstrap/ng-bootstrap": "^5.1.2",
"bootstrap": "^4.3.1",

在运行 Angular 项目时仍显示默认字体大小。

【问题讨论】：

如果您使用生成的引导 css 文件，则无法再自定义 scss 变量。您需要使用 scss，以便根据您的变量值生成引导 css。文档解释了如何自定义变量：getbootstrap.com/docs/4.3/getting-started/theming/…

标签： angular bootstrap-4 angular8 ng-bootstrap angular-bootstrap

【解决方案1】：

@JB Nizet 评论中提到了我的问题的答案。

我发布这个答案是为了为即将到来的开发者展示一些步骤，他们愿意知道我的问题的实际答案。

如果您将 Angular 8 与 Bootstrap ^4.3.1 一起使用，那么您在 angular.json 文件中的样式节点应如下所示：

"styles": [
   //"node_modules/bootstrap/scss/bootstrap.scss",
   //"node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/scss/style.scss"
],

你的 style.scss 就像：

/* You can add global styles to this file, and also import other style files */
$font-size-base: 0.875rem;
@import "../../node_modules/bootstrap/scss/bootstrap";

【讨论】：