How to import _variables.scss in application styles.scss?


Topic: How to import _variables.scss in application styles.scss?

Ungr pro asked 6 years ago

Hello. How do you include MBD SCSS variables inside custom SCSS file?

Expected behavior

Ability to use variables inside custom style

# myapp/styles.scss

@import "~ng-uikit-pro-standard/assets/scss/bootstrap/variables";

$testVar: $font-family-base;

Actual behavior

ERROR in ./src/assets/scss/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/scss/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                         ^
      Argument `$color` of `darken($color, $amount)` must be a color
      in C:\Users\admin\docker\fitborn-web\app\node_modules\ng-uikit-pro-standard\assets\scss\bootstrap\_variables.scss (line 174, column 43)

Damian Gemza staff answered 6 years ago

Dear @Ungr

Please use the below code to import all of our MDB variables in your stylesheet:

@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 Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: PC
  • Browser: Chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No