What if the global variables defined in style.scss are not recognized within the angular component?

in styles.scss , variables.scss , variables.scss the variable $jj is defined, and then $jj will report an error
variables.scss

in testsass.component.scss.

$jj : -sharp05c2fc;

.jj {
    background: $jj;
}

styles.scss

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

testsass.component.scss

$background: -sharpfa6164;
.article {
    // background: $jj;//
    background: $background//
}

ps :

there is no problem with using .jj styles in testsass.component.html
variables defined within the component can be recognized

testsass.component.html

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

ask for advice!

Angular sass

May.22,2021

requires the introduction of variables.scss in the sass file of the current component, but isn't it introduced in styles.scss ? And it doesn't matter at all to remove @ import 'variables' from styles.scss , but what's the use of adding this to the document that installs ngx-bootstrap ?

Previous: Bootstrap table column editor and table conflict

Next: I wrote a broadcast picture with setInterval, but after running it for a period of time, the browser crashed.