Sass扩展不适用于简单示例

Question

下面是简单的sass代码，访问sass代码的Angular 2组件以及呈现的HTML。在我的最后一个span元素中，blueBig无法正常工作。我是sass的新手，我不确定为什么这个简单的例子没有正确扩展。任何人都可以为我解释这个问题吗？谢谢！

  

Angular2组件

@Component({
selector: 'test',
template: `
    <h1> testing sass</h1>
    <span [ngClass]="{blue : true}">This should be blue</span> 
    <br>
    <span [ngClass]="{big: true}">This should be big</span>
    <br>

    <span [ngClass]="{blue : true, big: true }">This should be big and blue</span>
    <br>
    <span [ngClass]="{blueBig : true}"> this should be big and blue as well</span>

`,
styleUrls: ['assets/scss/testing-component.scss']
})

  

萨斯   

.blue{
  color:blue;
}

.big{
  font-size: 200%;
}

.blueBig{
  @extend .blue;
  @extend .big;
}

  

HTML

  

呈现HTML

Answer 1

我在本地编译了你的Sass，它似乎是正确创作的。

如果无法看到呈现的HTML，我的猜测是Angular正在将camelcase blueBig转换为kebab-case blue-big。尝试在类名周围加上引号，即

<span [ngClass]="{'blueBig' : true}">