variable override is not working in MDB 5

[mannok]

I cannot override color variable as what I used to.

It should work by overriding bootstrap variable in xxx\node_modules\mdb-ui-kit\src\scss\custom\_variables.scss. I added some pieces of code as following:

// Your custom variables

$secondary: #00ea12;

However, it does not work. Nothing has been overrided when I do sth like <button class="btn btn-secondary"></button>. Is this broken in MDB 5?

UPDATE:

Seems that those variable inside _variable.scss do not have !default suffix

[ViRuSTriNiTy]

I was wondering whether a theming support is still there but no docs can be found. So I guess it has been dropped.

[mannok]

I was wondering whether a theming support is still there but no docs can be found. So I guess it has been dropped.

I believe they just forget to add !default suffix into source scss file. Here is a temporary workaround for who encountered this issue like what I did.

1. open xxx\node_modules\mdb-ui-kit\src\scss\free\_variables.scss
2. append !default; to the line of variable which you need to override
3. enjoy

[ViRuSTriNiTy]

Here is a gulp task to inject !default flag automatically:

gulp.task('preprocess-mdbootstrap-scss-variables', function () {
    let result = gulp
        .src("node_modules/mdb-ui-kit/src/scss/free/_variables.scss", {
            base: "./" // make output of gulp.dest() relative to src, https://stackoverflow.com/a/24412960/3936440
        });

    // add missing default flag to variables to allow customization
    // https://github.com/mdbootstrap/mdb-ui-kit/issues/15
    const variables = ["primary", "secondary", "light", "dark"];

    variables.forEach(function (value) {
        var regex = new RegExp(`^\\$${value}:(.*);`, "gm");

        result.pipe(replace(regex, "$primary:$1 !default;"));
    });

    return result
        .pipe(gulp.dest("./", { overwrite: true }));
});

[Martussky]

Hi,

have you imported .custom/variables file on the top of the list of imported files within mdb.free.scss and then recompile it? It should work.

Best, Marta

[ViRuSTriNiTy]

Hi,

have you imported .custom/variables file on the top of the list of imported files within mdb.free.scss and then recompile it? It should work.

Best, Marta

Recompling a node module? I hear that for the first time. Tell me more ^^

[Martussky]

You need to extract scss files from node_modules, put the scss files in the root directory, overwrite variables and recompile mdb css file. If you have a problem with that, please use our Webpack starter: https://github.com/mdbootstrap/mdb-webpack-starter.

[giacomotaormina]

@Martussky The fix of copy the scss files in the root directory is temporary or is the solution? Do you have in roadmap the add "!default" tags in scss variables or not? This is necessary to customize the theme.

[Martussky]

Hi, we solved this problem in our package and we will release it in two weeks - 23.11.2020. Best, Marta

[smolenski-mikolaj]

Fixed with today's release (2.2.1).