angular和sass - 更改组件级别的变量值

Question

我有一个应用程序，它将在两个选项卡中显示相同的组件。我使用带变量的sass主题。我希望这些标签上的颜色不同，这是由$accent变量控制的。

当页面出现时，下面的实现似乎有效。第一个标签的颜色正确，然后当我转到第二个标签时，它也是正确的颜色。然而，当我回到第一个标签时，它会显示第二种颜色，并且两个标签都会保留第二种颜色。

class BaseComponent {
    //some logic
}

@Component({
    selector: 'app-first',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './base.component.html',
    styleUrls: ['./first.component.scss']
})
export class FirstComponent extends BaseComponent {
}

@Component({
    selector: 'app-second',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './base.component.html',
    styleUrls: ['./second.component.scss']
})
export class SecondComponent extends BaseComponent {
}

这里是first.component.scss文件：

$accent: #46ADD7;
@import "~my/theme";

以下是second.component.scss文件：

$accent: #46ADD7;
@import "~my/theme";