SASS Imports misbehaving

I have just started learning SCSS and what I have noticed is, there is something going on with importing partials in the 'main.scss' file. I am using live-server to host the website locally and every time I modify something, in simple words, it doesn't work. It doesn't show up on the website when it refreshes automatically in the browser. And now, what I see is all my styles are gone, even though everything in my files is still the same.

1. This is my main.scss file below.

    // ABSTRACTS
    @use "abstracts/functions";
    @use "abstracts/mixins";
    @use "abstracts/variables";

    //PAGES 
    @use "pages/home";

    //COMPONENTS
    @use "components/button";

    //BASE
    @use "base/base";
    @use "base/animations";
    @use "base/utilities";
    @use "base/typography";

    //LAYOUTS
    @use "layouts/header";
    @use "layouts/grid";

Note:I also used @import for this, but it's the same.

2. This is my partial which I am trying to modify.

    .row {
        max-width: $grid-width;
        background-color:yellow;
        margin: 0 auto;
        margin-bottom: $gutter-vertical;
    }

What happens is, the background color doesn't change. It just stays the same. It's not a code problem since I have tried the same with the CSS code inside a style tag. So I am sure it is related to SASS import.