Possible problem in MDB 4.5.1

Topic: Possible problem in MDB 4.5.1

Josip Tomašev priority asked 6 years ago

When I try to compile new MDB scss in same .css file with Bootstrap 4.1.0, I get error:

Error: $map2: #dc3545 is not a map for `map-merge'
 on line 43 of /home/josip/Radna površina/html/domene/Q/miele.elipso.hr/dizajn/src/vendor/MDB 4.5.1/scss/core/_colors.scss
 from line 36 of /home/josip/Radna površina/html/domene/Q/miele.elipso.hr/dizajn/src/vendor/MDB 4.5.1/scss/mdb.scss
 from line 5 of /home/josip/Radna površina/html/domene/Q/miele.elipso.hr/dizajn/src/scss/style.scss

I suppose you're not checked (in)compatibility for variable names with Bootstrap, and now ther is no possible to compile Bootstrap and MDB in one css file. Problem is with variables which are defined in Bootstrap, and then 'redefined' in MDB with sintax e.g.:

$red: () !default;

This variables can't be redeclared in MDB (because of '!default' keyword), so next line:

$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);

return error, because variable $red as second parameter of function map-merge() is not map but string.

Nguyễn Ngọc Sang free commented 6 years ago

same problem , v4.5.1

ultimateBusiness free commented 6 years ago

same here - can't build Laravel project cause of three error's after updating to v4.5.1

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, we use some of Bootstrap functions and variables in our files, that's why we have them. Best, Marta

Add comment

lifestar pro answered 6 years ago

0 0 Best answer

I generally do not understand why in your dist the "right" files from the bootstrap, such as _functions.scss and _variables.scss. I never used them. Because the logic is this: - first I load my customized _variables.scss file - then bootstrap files, and then directly load necessary mdb files.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, thank you, Josip Tomašev for your solution and apologize for our mistakes. We already fix this problem in our package and that fixed package will be available after new release which will be in the second week of May. Best, Marta

Add comment

Josip Tomašev priority answered 6 years ago

3 0 Best answer

Hi Marta,

Problem here are in redefinition existing variables from Bootstrap to MDB, eg.

In Bootstrap file _variables.scss we have:
<pre>$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;</pre>
and in MDB file _colors.scss we have:
<pre>$red: () !default;
$pink: () !default;
$purple: () !default;
...</pre>
I see that you included Bootstrap _variables.scss in MDB scss/core/bootstrap directory, and commented this variables, but if I include in same project both scss (to compile one css), then I have conflict - variables with same names from Bootstrap can't be redeclared in MDB because of magic keyword '!default'.

After quick testing, I added extra _b4mdb.scss file between bootstrap.scss and mdb.scss, with content:
<pre>$white: ();
$black: ();

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

$colors: ();</pre>
And now everithing compile without errors, and I have one css with all included files for my project :)

Regards

Josip

Please insert min. 20 characters.

Hi Marta, Problem here are in redefinition existing variables from Bootstrap to MDB, eg. In Bootstrap file _variables.scss we have:

$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

and in MDB file _colors.scss we have:

$red: () !default;
$pink: () !default;
$purple: () !default;
...

I see that you included Bootstrap _variables.scss in MDB scss/core/bootstrap directory, and commented this variables, but if I include in same project both scss (to compile one css), then I have conflict - variables with same names from Bootstrap can't be redeclared in MDB because of magic keyword '!default'. After quick testing, I added extra _b4mdb.scss file between bootstrap.scss and mdb.scss, with content:

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

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

$colors: ();

And now everithing compile without errors, and I have one css with all included files for my project :) Regards Josip

Josip Tomašev priority commented 6 years ago

And, yes, it works with Bootstrap 4.1.0 also

Nguyễn Ngọc Sang free commented 6 years ago

work great !! Thanks Josip