4.5.1 is broken (color maps)

[cjmaxik]

Expected behavior

Completed compiling (like on 4.5.0)

Actual behavior

Argument `$map2` of `map-merge($map1, $map2)` must be a map
in [...]\node_modules\mdbootstrap\scss\core\_colors.scss (line 43, column 7)

Because $red has been already set in bootstrap itself!

Your working environment and MDB version information

node v8.11.1, npm v5.6.0, yarn v1.5.1, bootstrap v4.1.0, mdbootstrap v4.5.1

Resources (screenshots, code snippets etc.)

scss file

@import "~bootstrap/scss/bootstrap";
@import "~mdbootstrap/scss/mdb";

[Martussky]

Hi, I have the newest, clean MDB Free 4.5.1 package and I don't have any conflict during compiling. How can I reproduce this problem? Best, Marta

[cjmaxik]

@Martussky https://gist.github.com/cjmaxik/b6e20bdc2f9124210bf9658e3aac04ee

[Martussky]

In this package we still use Bootstrap 4.0.0 and we don't use all of Bootstrap variables, if you download new MDB Free 4.5.1 package and go to scss/core/bootstrap/variables.scss then you will see that many of bootstrap variables is commented because they conflict with our variables. That's why we've commented them.

[cjmaxik]

Run yarn add bootstrap@4.0.0 && yarn run production and you will see the same result.

[Martussky]

OK, but you have this problem in the newest package where anything won't change? From your statement, it appears that you have overwritten our file with another file.

[cjmaxik]

I just want to compile MDBootstrap with Bootstrap from sources for my website. What is your approach to do so? Maybe it was my mistake to grab bootstrap then throw mdbootstrap on top of it. In my gist example, I just grab fresh copies of mdbootstrap and bootstrap and try to compile it from scss sources.

Your color variables approach is conflicting with Bootstrap variables: you're trying to make a map of color variants in variable which already exist in bootstrap variables declaration.

[Martussky]

The problem is with names of variables. In MDB package we have a few files with variables and some of them (our variables) have the same names as bootstrap ones and that's why we had to comment that bootstrap ones (we also could delete them, but we decided to comment). So, when you import MDB files and raw Bootstrap files, then the problem appears - the compiler reads first bootstrap variables and after that ours and they have conflict.

[cjmaxik]

It starts to sound complicated to compile that mess :) So, what should I do now to compile it?

[Martussky]

If you want to have only MDB styles, just do the same what we did - comment or delete that Bootstrap variables which make a conflict. I don't have a better idea, because most of our users just use our scss files and don't import raw bootstrap ones.

[beany-vu]

I got the same issue if I use bootstrap version 4.1.0 and mdbootstrap 4.5.1. If I use the older one (bootstrap 4.0.0 and mdbootstrap 4.5.0) then I don't face this problem. I guess that node-sass hasn't yet adapted to the newer version of these dependencies.

[Martussky]

we still use Bootstrap 4.0.0 and we will update our package to the new Bootstrap 4.1.0 in the next release which will be in May.

[ejntaylor]

Trying to add MDB to an existing BS project.

Get: Error: argument $map2 of map-merge($map1, $map2) must be a map

Which is due to $red -- this is defined in BS Vars. Is this causing the issue?

Any ideas how to resolve? I tried commenting out from BS core, but these vars are used throughout BS.

Thanks

[Martussky]

Hi, this issue with MDB and Bootstrap variables will be solved in the next release, which will be in May. I apologize for the problem. If you use only these bootstrap files which are in our package, not the newest Bootstrap it should be OK. We will update MDB package to the newest Bootstrap 4.1.0 in the next release. Best, Marta

[ejntaylor]

Hi Marta, I'm using BS 4.0.0 at the moment and get the issue - is it something else?

[Martussky]

Hi, do you use Bootstrap files from our MDB 4.5.1 package?

[ejntaylor]

No, I don't.

I have an existing project where we have pulled BS using NPM.

Aim at the moment is just use the Material form styling...

Thanks

EDIT: Have just checked with supplied BS CSS and it doesn't fix.

[ejntaylor]

Error: argument $map2 of map-merge($map1, $map2) must be a map This is: $red: () !default;

$red: () !default; $red: map-merge(( "lighten-5": $red-lighten-5, "lighten-4": $red-lighten-4, "lighten-3": $red-lighten-3, "lighten-2": $red-lighten-2, "lighten-1": $red-lighten-1, "base": $red-base, "darken-1": $red-darken-1, "darken-2": $red-darken-2, "darken-3": $red-darken-3, "darken-4": $red-darken-4, "accent-1": $red-accent-1, "accent-2": $red-accent-2, "accent-3": $red-accent-3, "accent-4": $red-accent-4 ), $red);

[Martussky]

For this package - MDB 4.5.1 we commented some of Bootstrap variables in our core/bootstrap/variables.scss file, because they had conflict with our variables, that's why any new file, not ours will have conflict. This problem will be fixed in the next release which will be in May 7th.

[beany-vu]

@Martussky Thanks for your information!!! :D

[Martussky]

You're welcome.

[cjmaxik]

4.5.2 release has resolved the issue. Closing.

[ejntaylor]

Works perfectly now. Thanks

[JihedHalimi]

We have the exact same problem with angular-bootstrap-md 6.0.2

[Martussky]

It should be fixed in the next MDB Angular release.

[pixelfriese]

No, i have installed bootstrap V4.1.1 and MDBootstrap V4.5.2 and the error is present.

Error: public\bower\MDBootstrap\scss\core\_colors.scss Error: argument$map2ofmap-merge($map1, $map2)` must be a map

   Backtrace:
    public/bower/MDBootstrap/scss/core/_colors.scss:43, in function `map-merge`
    public/bower/MDBootstrap/scss/core/_colors.scss:43
    on line 43 of public/bower/MDBootstrap/scss/core/_colors.scss

$red: map-merge(( ------^`

The last working version of MDBootstrap is V4.5.0.

[pixelfriese]

So, I have found a quick fix for that, but it is not very clean in my eyes:

https://mdbootstrap.com/support/possible-problem-in-mdb-4-5-1/

I have created a new Sass file like in Josip Tomašev´s answer an put it between the Sass file of bootstrap and MDB:

$white: ();
$black: ();

$blue: ();
$indigo: ();
$purple: ();
$pink: ();
$red: ();
$orange: ();
$yellow: ();
$green: ();
$teal: ();
$cyan: ();

$colors: ();

[cjmaxik]

@pixelfriese did you really sure that you're using mdb v4.5.2?

[pixelfriese]

Maybe there was something wrong. I have updated to the latest version 4.5.3 and integrated the scripts directly. Now everything is fine and I do not even need the extra file to reset the color variables.

[Martussky]

Hi, I don't know why in your MDB 4.5.2 package you still had issues, but for sure since that version, the compiling errors have been corrected. Please provide more details if you still need help. Best, Marta

[abhijitgujar86]

in 4.7.6 I still have the same issue

[Martussky]

Hi,

in our newest package 4.10.1, there shouldn't be a problem.

Best, Marta