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 6 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)

Arkadiusz Idzikowski staff answered 6 years 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


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

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

Please insert min. 20 characters.

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: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No