What is the correct way of importing the color variables in

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

ADS@Aareon pro asked 5 years ago

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)

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

ADS@Aareon pro commented 5 years 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

ADS@Aareon pro commented 5 years 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?

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?

Please insert min. 15 characters.

ADS@Aareon pro commented 5 years 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?

Arkadiusz Idzikowski staff commented 5 years 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ADS@Aareon

Pro User 29Support score
8Questions 1Answers 0Snippets