What is the correct way of importing the color variables in sass?

MDB SupportCategory: MDB AngularWhat is the correct way of importing the color variables in sass?
ADS@Aareon Pro User asked 1 week ago in MDB pro, version:6.0.2

I used to do it as folows:

@import “~ng-mdb-pro/assets/scss/bootstrap/functions”;
@import ‘~ng-mdb-pro/assets/scss/bootstrap/variables’;
@import ‘~ng-mdb-pro/assets/scss/mdb/free/data/colors’;
@import ‘~ng-mdb-pro/assets/scss/mdb/free/data/variables’;
@import ‘~ng-mdb-pro/assets/scss/mdb/pro/variables-pro’;

After upgrading to v6.0.2 (pro) i changed it to: (files moved)

@import “~ng-mdb-pro/assets/scss/bootstrap/functions”;
@import ‘~ng-mdb-pro/assets/scss/bootstrap/variables’;
@import ‘~ng-mdb-pro/assets/scss/core/colors’;
@import ‘~ng-mdb-pro/assets/scss/core/variables’;
@import ‘~ng-mdb-pro/assets/scss/pro/variables’;

But this gives me a compile error:
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/styles.scss)
Module build failed:
undefined
^
Argument `$map2` of `map-merge($map1, $map2)` must be a map
in D:ReposTuring.WebApplications.Opsnode_modulesng-mdb-proassetsscsscore_colors.scss (line 43, column 7)

1 Answers
Arkadiusz Idzikowski answered 7 days ago

Dear ADS@Aareon,

Those files were moved from ng-mdb-pro to ng-uikit-pro-standard. Try to change your import paths to:

@import “~ng-uikit-pro-standard/assets/scss/bootstrap/functions”;
@import “~ng-uikit-pro-standard/assets/scss/bootstrap/variables”;
@import “~ng-uikit-pro-standard/assets/scss/core/colors”;
@import “~ng-uikit-pro-standard/assets/scss/core/variables”;
@import “~ng-uikit-pro-standard/assets/scss/pro/variables”;

Best,

Arek

Arkadiusz Idzikowski replied 6 days ago

Dear ADS@Aareon,

Sorry for the confusion, I sent you wrong path. Please try this one:

@import “~ng-mdb-pro/assets/scss/core/bootstrap/functions”;
@import ‘~ng-mdb-pro/assets/scss/core/bootstrap/variables’;
@import ‘~ng-mdb-pro/assets/scss/core/colors’;
@import ‘~ng-mdb-pro/assets/scss/core/variables’;
@import ‘~ng-mdb-pro/assets/scss/pro/variables’;

Bootstrap functions and variables should be in core/bootstrap folder. And then background-color: map-get($blue , lighten-5 ); should work correctly.

Best,
Arek

ADS@Aareon Pro User replied 7 days ago

btw this is on line 120 in my scss:

background-color: map-get($blue , lighten-5 );

Worked fine before, do i need more imports, or is this no longer valid?

ADS@Aareon Pro User replied 7 days ago

Installed the package side by side with mdb-pro and changed the import paths, still getting the error:

package.json
“ng-mdb-pro”: “git+https://oauth2:########@git.mdbootstrap.com/mdb/angular/ng-pro.git#6.0.2”,
“ng-uikit-pro-standard”: “git+https://oauth2:########@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#6.1.5”,

scss file
@import “~ng-uikit-pro-standard/assets/scss/bootstrap/functions”;
@import “~ng-uikit-pro-standard/assets/scss/bootstrap/variables”;
@import “~ng-uikit-pro-standard/assets/scss/core/colors”;
@import “~ng-uikit-pro-standard/assets/scss/core/variables”;
@import “~ng-uikit-pro-standard/assets/scss/pro/variables”;

error with ng serve:
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/styles.scss)
Module build failed:
undefined
^
Argument `$map` of `map-get($map, $key)` must be a map
in D:ReposTuring.WebApplications.Opssrcstyles.scss (line 120, column 23)
ERROR in No NgModule metadata found for ‘AppModule’.

Do i need to include some module in my app?

ADS@Aareon Pro User replied 7 days ago

Hello Arek,

Files not found, i probably need to install another package?
We are installing mdb-pro with npm and git
“ng-mdb-pro”: “git+https://oauth2:#############@git.mdbootstrap.com/mdb/angular/ng-pro.git#6.0.2”,

Do i need to install another package or is this a replacement of the current package?
Where can i find information about ng-uikit-pro-standard?

Regards,
Richard