in styles.scss , variables.scss , variables.scss the variable $jj is defined, and then $jj will report an error
variables.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 :

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

testsass.component.html

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

ask for advice!