星云主题功能 nb-install-component 不起作用答案

【问题标题】：Nebular theme fonction nb-install-component not working星云主题功能 nb-install-component 不起作用
【发布时间】：2018-11-19 10:17:13
【问题描述】：

我在其他组件中使用星云主题时遇到问题我在其他组件中使用过，效果很好，但在其他组件中不起作用

这是我的代码

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

【问题讨论】：

标签： angular sass nebular

【解决方案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],
})

【讨论】：