Angular 2 Bulma变量不适用于ngClass属性

debugcn 发表于 Dev

奥列格

编译我的代码时，变量（$ tooltip-background-color，$ tooltip-color）不变。这些值保持默认值。

HTML代码：

<div class="has-tooltip-multiline has-tooltip-top"
     [ngClass]="{'dark-theme': darkTheme === true, 'light-theme': darkTheme !== true}"
     [attr.data-tooltip]="tooltipText">
  {{Title}}
</div>

SCSS代码：

.dark-theme{
  $tooltip-background-color: #363636;
  $tooltip-color: #fff;
}

.light-theme{
  $tooltip-background-color: #ECEFF0;
  $tooltip-color: #333333;
}

@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';

Component.ts文件：

@Component({
  selector: 'box-component',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class TextBoxComponent implements OnInit {

  @Input('darkTheme') darkTheme: boolean;
  @Input('Title') Title: string;
  @Input('tooltipText') tooltipText: string;


  constructor() {
  }

  ngOnInit() {
  }
}

Angular.json文件

"styles": [
              "node_modules/bulma/css/bulma.min.css",
              "node_modules/bulma-switch/dist/css/bulma-switch.min.css",
              "node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css",
              "src/styles.scss"
            ]

角版本为8.2.14

奥列格

.light-theme {
  --tooltip-background-color: 236, 239, 240;
  --tooltip-color: 51, 51, 51;
}

.dark-theme{
  --tooltip-background-color: 54, 54, 54;
  --tooltip-color: 255, 255, 255;
}


$tooltip-background-opacity: 1;
$tooltip-background-color: var(--tooltip-background-color);
$tooltip-color: var(--tooltip-color);


@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。