What is the right way to override _variables in Bootstrap 4.3.1?

Question

I am using Bootstrap 4.3.1 in my angular 8 project. Basically I want to (change / override) some default variables of bootstrap. Like e.g $font-size-base

I've tried below code but this isn't working at all, please suggest me what is the right way to (customize / change / override) bootstrap scss variables in angular project.

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",

Still showing default font size while running angular project.

If yo use the genarated bootstrap css file, then you can't customize the scss variables anymore. You need to use scss, in order to generate the bootstrap css based on your variables values. The documentation explains how to custmize variables: https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults — JB Nizet, Nov 15 '19 at 21:12

score 1 · Accepted Answer · edited Nov 18 '19 at 11:07

The answer of my question is mentioned in @JB Nizet comment.

I'm posting this answer to show baby steps for upcoming developers, who are willing to know a practical answer of my question.

If you're using Angular 8 with Bootstrap ^4.3.1 then your style node in angular.json file should be like:

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

and your style.scss be like:

/* 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";

What is the right way to override _variables in Bootstrap 4.3.1?

1 Answers1