Bootstrap SASS variables don't get overwritten when placed inside typography.scss

You are right.
When scss files are called on the imports.scss file typography is callled after bootstrap so, any changes in typography would not take effect on the bootstrap compiled file.
I do not remember the reason on a beginning and certainly not sure to require a file specifically for typography.
Will think about this little deeper.

Same problem here: it seems not to be possible to override typography in the moment. E.g. changing font-size for h1, h2, .. or even changing the font-family is not possible right now!

I changed $font-size-h1 -> $h1-font-size and it work for me. $h1-font-size is used in bootstrap.

There is a confusion here, even from development side.
Variables should be placed in variables.scss
Typography should consume variables not define them.
But if you wish to define variables in typography, move its order on imports.css and place it after variables before bootstrap.

So, where and how to customize the styles? In my impors.scss I have:

/* IMPORTS */

//@import url(font-awesome.min.css);
// variables
@import "variables";
//bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
//material design bootstrap
//@import "../node_modules/mdbootstrap/scss/mdb";
// barrio
@import "barrio";
// typography
@import "typography";
// mixins
@import "mixins";

Is this correct?

@ab2211,

That is the standard import file and there are a couple of issues with it as it stands.

First off typography.scss defines the h1-h6 font size variables but as pointed out by m.lebedev their names are wrong and they should be $h1-font-size etc instead of $font-size-h1.

Secondly because these variables are imported after the bootstrap import they are ignored so you either need to move all of the typography.scss variable declarations into the variables.scss file or you need to move the typography.scss in the import file between variables.scss and bootstrap.

As for adding other custom styling I'm not sure if there are any specific best practices however styling can be added to any file that is imported. If you only have a few amendments then at the end of the styles.scss file makes sense otherwise you can create your own component or custom scss files and add them to the import file.

@Ollie222: You solved that same bug I was running into.

Thanks!

Ran into the same issue, quick patch based on Ollie222's comment #9.

@hatuhay the variable name is wrong, should be $h2-font-size instead of $h2-font-size-h2