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

Question

我在我的angular 8项目中使用Bootstrap 4.3.1。基本上我想（更改/覆盖）bootstrap的一些默认变量。例如$ font-size-base

我已经尝试过下面的代码，但是这根本不起作用，请向我建议在角度项目中（自定义/更改/覆盖）bootstrap 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",

运行角度项目时仍显示默认字体大小。

Answer 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";