Nebular theme fonction nb-install-component not working

Question

I have a problem in using nebular theme in other component I have used it in other component and it worked very well but in other component is doesn't work

this is my code

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
  encapsulation: ViewEncapsulation.None,
})

this is my scss file

    @import '../../../@theme/styles/themes';

    @include nb-install-component() {
      $color_1: #555;
      $color_2: nb-theme(color-fg-text);
      $color_3: #000;
      $color_4: #999;
      $color_5: #ccc;
.disabled {
      cursor: default !important;
      color: $color_2;
      background: #fbefef;
    }
    .highlight {
      color: $color_2;
    }
    }

When i remove the @include nb-install-component the style work but without using global colors and if i use nb-install-component the style doesn't work at all

please tell me if i have any mistakes in this

even thought that i used the same method here

@Component({
  selector: 'ngx-file-uploader',
  templateUrl: './ngx-file-uploader.component.html',
  styleUrls: ['../scss/ngx-file-uploader.component.scss'],
})

My sass file

@import './../../../@theme/styles/themes';

@include nb-install-component() {

  .drop-zone {
    height: 100px;
    font-size: nb-theme(form-control-font-size);
    box-shadow: nb-theme(card-shadow);
    font-weight: nb-theme(card-font-weight);
    border: nb-theme(card-border-width) nb-theme(card-border-type) nb-theme(card-border-color);
    border-radius: nb-theme(card-border-radius);
    background: nb-theme(card-bg);
    color: nb-theme(card-fg-text);
    margin-bottom: nb-theme(card-margin);
    margin-top: nb-theme(card-margin);
  }

  .content {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .over {
    background-color: nb-theme(color-bg-active);
  }
}

score 0 · Answer 1 · answered Nov 19 '18 at 02:17

I found the probleme it was in my component the scss file was already compiled but due to the encapsulation is disabled the style is not working when i remove this line from my component it worked very well

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
  encapsulation: ViewEncapsulation.None,
})

become

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
})

Nebular theme fonction nb-install-component not working

1 Answers1