Nebular Theme fonction nb-install-component не работает

У меня проблема с использованием небулярной темы в другом компоненте. Я использовал ее в другом компоненте, и она работала очень хорошо, но в другом компоненте она не работает.

это мой код

@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,
})

это мой файл scss

    @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;
    }
    }

Когда я удаляю @include nb-install-component, стиль работает, но без использования глобальных цветов, а если я использую nb-install-component, стиль вообще не работает

скажите, пожалуйста, есть ли у меня в этом ошибки

даже подумал, что я использовал здесь тот же метод

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

Мой файл sass

@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);
  }
}

person Ayoub EL Abassi    schedule 18.11.2018    source источник


Ответы (1)


Я обнаружил, что проблема была в моем компоненте, файл scss уже был скомпилирован, но из-за отключения инкапсуляции стиль не работает, когда я удаляю эту строку из своего компонента, он работал очень хорошо

@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,
})

стали

@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],
})
person Ayoub EL Abassi    schedule 19.11.2018