如何在自定义组件样式表中使用自定义组件变量？

Question

我们说我有一个自定义组件 - WoodComponent（/src/components/wood/wood.ts）：

import { Component } from '@angular/core';
@Component({
  selector: 'wood',
  templateUrl: 'wood.html'
})
export class WoodComponent {
  color: string = 'brown';
  constructor() {}
}

我如何在组件的样式表（/src/components/wood/wood.scss）中使用颜色变量？ E.g：

wood {
  .wood-selected {
    background-color: color($colors, [color variable from component]);
  }
}

谢谢！

Answer 1

您需要在brown文件中声明variables.scss，然后使用如下所示。

variables.scss

colors: ( primary: #488aff, brown: brown);

.scss

wood {
  .wood-selected {
    background-color: color($colors, brown);
  }
}