Possible problem in MDB 4.5.1

Topic: Possible problem in MDB 4.5.1

Josip Tomašev pro premium priority asked 7 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 commented 7 years ago

same problem , v4.5.1

ultimateBusiness commented 7 years ago

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

Add comment

Josip Tomašev pro premium priority answered 7 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:

$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 pro premium priority commented 7 years ago

And, yes, it works with Bootstrap 4.1.0 also

Nguyễn Ngọc Sang commented 7 years ago

work great !! Thanks Josip

amir choubani commented 7 years ago

Can you explain more the change you made please ?

Josip Tomašev pro premium priority commented 7 years ago

as you can see in post, I nothing changed, only forced (in separate file) to replace Bootstrap variable which was string (eg. $red: #dc3545 !default;) in MDB variable which was map ($red: () !default;). because in Bootstrap this variable was declared with keyword '!default', they can't be redeclared any more with same keyword, only without. so, I created separate file (to easier put it in some of my project) and redeclared variables without magical '!default' (eg. $red: ();) any file in Bootstrap or MDB was not changed

amir choubani commented 7 years ago

where did you create the separate file exactly. I Created it but it does not work for me. Do I need to import this file ?

Josip Tomašev pro premium priority commented 7 years ago

yes, it must be imported in compiled file between bottstrap.scss and mdb.scss, eg. @import '../vendor/bootstrap-4.1.0/scss/bootstrap'; @import 'b4mdb'; @import '../vendor/MDB 4.5.1/scss/mdb';

amir choubani commented 7 years ago

I am having new error : Module not found: Error: Can't resolve '../font/roboto/Roboto-Bold.eot'

Josip Tomašev pro premium priority commented 7 years ago

can you send your scss file in which you merge all libs? I think you something included twice

amir choubani commented 7 years ago

/* after changing this file run 'yarn run webpack:build' */ $fa-font-path: '~font-awesome/fonts'; $image-path: 'node_modules/angular-bootstrap-md/img' !default; $roboto-font-path: "node_modules/angular-bootstrap-md/font/roboto/" !default; @import "bootstrap-variables"; //@import 'node_modules/bootstrap/scss/bootstrap'; //@import 'node_modules/font-awesome/scss/font-awesome'; @import '~primeng/resources/primeng.min.css'; @import '~primeng/resources/themes/bootstrap/theme.css'; @import 'node_modules/font-awesome/scss/font-awesome'; @import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap'; @import 'b4mdb.scss'; @import 'node_modules/angular-bootstrap-md/scss/mdb-free';

amir choubani commented 7 years ago

It is something about path : $image-path: '../../../../../node_modules/angular-bootstrap-md/img' !default; // Fonts Path for angular-bootstrap-md $roboto-font-path: "../../../../../node_modules/angular-bootstrap-md/font/roboto/" !default; instead of : $image-path: ‘node_modules/angular-bootstrap-md/img’ !default; $roboto-font-path: “node_modules/angular-bootstrap-md/font/roboto/” !default; It works now.

Josip Tomašev pro premium priority commented 7 years ago

ok

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi, in MDB we use the same variables names as Bootstrap, that's why in our new clean package you can see that many of Bootstrap variables in our package commented because we don't want the conflict. If you use only Bootstrap files from our package it is fine but if you use raw Bootstrap files from the other package then the conflict come back. BTW, in MDB 4.5.1 we still use Bootstrap 4.0.0 version and we will upgrade MDB to the newest version of Bootstrap in the next release. Best, Marta

Nguyễn Ngọc Sang commented 7 years ago

Hi Marta, I use Bootstrap 4.0.0 but it's still get problem

ultimateBusiness commented 7 years ago

Hi Marta, the error in v4.5.0 (@function set-notification-text-color($color)) was easy to fix by only commenting out this function - but this error now breaks the whole build process, so I can't use this version. It fails with both Bootstrap 4.0 and 4.1.

Add comment

Marta Szymanska staff pro premium answered 7 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

lifestar pro answered 7 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 Szymanska staff pro premium answered 7 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

Write

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: Yes
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

About author

Josip Tomašev

Pro User Premium support

73Support score
2Questions 24Answers

0Snippets likes 0Snippets