在angular组件内不能识别style.scss内定义的全局变量怎么解决？？

Question

在styles.scss中引入了variables.scss,variables.scss内定义了变量$jj，然后testsass.component.scss中使用$jj会报错
variables.scss

$jj : #05c2fc;

.jj {
    background: $jj;
}

styles.scss

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

testsass.component.scss

$background: #fa6164;
.article {
    // background: $jj;//报错
    background: $background//正常
}

ps:

1. 在testsass.component.html中使用.jj的样式没有问题
2. 在组件内定义的变量可以识别

testsass.component.html

<h1 class="jj">h1标题</h1>
<h1 class="article">article</h1>

求指教呀！

Answer 1

在当前组件的sass文件内还要引入variables.scss才行,可是在styles.scss内不是引入了吗？而且去掉styles.scss内的@import 'variables'也根本没有影响，可是安装ngx-bootstrap的文档里加这个是有什么作用呢？