SCSSを変更しても反映されない

html
1<div class="banner-content-two">
2    <div class="banner-btn">
3        <a href="about.html" class="default-btn border-radius-5">Explore More</a>
4        <a href="add.html" class="default-btn two border-radius-5">Connect</a>
5    </div>
6</div>

scss
1.default-btn {
2    padding: 12px 25px 10px;
3    text-align: center;
4    color: var(--whiteColor) !important;
5    font-size: var(--fontSize);
6    font-weight: 600;
7    transition: var(--transition);
8    display: inline-block;
9    align-items: center;
10    justify-content: center;
11    position: relative;
12    border-radius: 8px;
13    z-index: 0;
14    background: var(--pinkColor);
15    overflow: hidden;
16    white-space: nowrap;
17    border: 0;
18    &:before {
19        content: '';
20        position: absolute;
21        top: 0;
22        bottom: 0;
23        left: 50%;
24        width: 550px;
25        height: 550px;
26        margin: auto;
27        background: var(--lightblueColor);
28        border-radius: 8px;
29        z-index: -1;
30        transform-origin: top center;
31        transform: translateX(-50%) translateY(-5%) scale(.4);
32        transition: transform .9s;
33    }
34    &:hover {
35        color: var(--whiteColor) !important;
36        &:before {
37            transition: transform 1s;
38            transform: translateX(-45%) translateY(0) scale(1);
39            transform-origin: bottom center;
40        }
41    }
42    &.two {
43        background: var(--lightblueColor);
44        &::before {
45            background-color: var(--pinkColor);
46        }
47    }
48}

Explore More はマウスオーバーすると右側のConnectの青っぽい色になり、
Connect はマウスオーバーすると左側のExplore Moreの赤っぽい色になります。

SCSSの動作を確かめるためにこの色を逆にさせたく、上記SCSSのコードの
background: var(--lightblueColor);　→　background-color: var(--pinkColor);
background-color: var(--pinkColor);　→　background: var(--lightblueColor);
と変更し、SCSSを以下のコマンドでコンパイルし、herokuにデプロイしてもなぜか挙動が変わりません。
ChromeでDevelopper Tool では変更されたSCSSのコードが表示されますが、挙動が変わらず。。。

何かやり方が悪いでしょうか？