Create React typescript components library - using variables from another scss file

crcl-alert.scss

@import '../../styles/variables.scss';

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    width: fit-content;
    &.primary {
        color: #004085;
        background-color: $primaryColor;
        border-color: #b8daff;
    }
    &.secondary {
        color: #383d41;
        background-color: $secondaryColor;
        border-color: #d6d8db;
    }
    &.success {
        color: #155724;
        background-color: $successColor;
        border-color: #c3e6cb;
    }
    &.danger {
        color: #721c24;
        background-color: $dangerColor;
        border-color: #f5c6cb;
    }
    &.warning {
        color: #856404;
        background-color: $warningColor;
        border-color: #ffeeba;
    }
    &.info {
        color: #0c5460;
        background-color: $infoColor;
        border-color: #bee5eb;
    }
    &.dark {
        color: #1b1e21;
        background-color: #d6d8d9;
        border-color: #c6c8ca;
    }
    &.light {
        color: #818182;
        background-color: #fefefe;
        border-color: #fdfdfe;
    }
}